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