Keyrune Home Set Icons Examples GitHub Project
Created by Andrew Gioia

### 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-5x`, 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).