Options & Examples


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


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-sth ss-2x"></i> ss-2x
<i class="ss ss-sth ss-3x"></i> ss-3x
<i class="ss ss-sth ss-4x"></i> ss-4x
<i class="ss ss-sth ss-5x"></i> ss-5x
<i class="ss ss-sth ss-6x"></i> ss-6x

Fixed Width

Fixed width:
Invasion Nemesis
Default (to compare):
Invasion Nemesis

All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class .ss-fw and the set symbols will have a constant width and centered icon.

<i class="ss ss-inv ss-fw"></i> Invasion
<i class="ss ss-nms ss-fw"></i> Nemesis

Rarity Colors

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

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
<i class="ss ss-tsp ss-timeshifted"></i> ss-timeshifted
ss-grad   ss-grad ss-foil

Webkit browsers suport the background-clip: text property which opens up some exciting options for rarities: true text gradients! Append the .ss-grad class to add a modern rarity gradient.

<i class="ss ss-mor ss-rare ss-grad ss-3x"></i> ss-grad
<i class="ss ss-tsp ss-timeshifted ss-grad ss-3x"></i> ss-grad
<i class="ss ss-isd ss-foil ss-grad ss-3x"></i> ss-foil

Note: You will only see a gradient while using a Webkit browser (i.e., Chrome or Safari).