Options & Examples

Download

Built-in size, position, and rarity options

Keyrune has some built in icon options to easily change the size, position, and rarity color of the set symbols. Take a look below at examples of each option with the class names to implement them.

Displaying a Set Icon

ss-zen

You can place Keyrune icons anywhere using the CSS classname prefix ss (for set symbol) and then the set icon's code. Inline elements like <i> and <span> are preferred, but any can be used.

<i class="ss ss-zen"></i> ss-zen

Icon Sizes

ss-2x ss-3x ss-4x ss-5x ss-6x

To conveniently increase the size of a set symbol you can append the classes ss-2x, ss-3x, ss-4x, ss-4x, and ss-6x. These classes increase the size by a factor equal to class name number.

<i class="ss ss-zen ss-2x"></i> ss-2x
<i class="ss ss-zen ss-3x"></i> ss-3x
<i class="ss ss-zen ss-4x"></i> ss-4x
<i class="ss ss-zen ss-5x"></i> ss-5x
<i class="ss ss-zen ss-6x"></i> ss-6x

Rarity Colors

ss-common ss-uncommon ss-rare ss-mythic

You can add a rarity color to each set symbol by appending the classes ss-common, ss-uncommon, ss-rare, and ss-mythic.

<i class="ss ss-ons ss-common"></i> ss-common
<i class="ss ss-ons ss-uncommon"></i> ss-uncommon
<i class="ss ss-ons ss-rare"></i> ss-rare
<i class="ss ss-ons ss-mythic"></i> ss-mythic