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-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
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