+ The Basic Icon
+
+
+ .ms-u
+
+
+
+
You can place Mana icons anywhere using the CSS classname prefix ms (for "mana symbol") and then the mana/card symbol's suffix.
+
+ <i class="ms ms-u"></i>
+
+
Creating a Casting Cost
+
+
+ .ms-cost
+
+
+ + .ms-shadow
+
+
+
+
Add the .ms-cost class to create a casting cost circle around the symbol. Append the .ms-shadow class to add a drop shadow.
+
+ <i class="ms ms-g ms-cost"></i>
+ <i class="ms ms-r ms-cost ms-shadow"></i>
+
+
Split Casting Costs
+
+
+ .ms-split
+
+
+ + .ms-shadow
+
+
+
+
Automatically create split casting costs using the .ms-split class along with the 2 symbols' codes. This works for color pairs and the "2" with a color.
+
+ <i class="ms ms-wu ms-split ms-cost"></i>
+ <i class="ms ms-2b ms-split ms-cost ms-shadow"></i>
+
+
Half Mana Casting Costs
+
+
+ .ms-half
+
+
+
+
Even though there's only been one of these ever printed you can still create them :P Half costs require a bit more markup:
+
+ <span class="ms-half">
+ <i class="ms ms-w ms-cost"></i>
+ </span>
+
+
Planeswalker Symbols
+
+
+ .ms-loyalty-up
+
+
+ .ms-loyalty-down
+
+
+
+
You can create planewalker loyalty symbols for the starting value, zero, and ticking up or down. The number that appears is based on a class you add, like .ms-loyalty-4.
+
+ <i class="ms ms-loyalty-up ms-loyalty-3"></i>
+ <i class="ms ms-loyalty-down ms-loyalty-2"></i>
+
+
Increase the Symbol's Size
+
+
+ .ms-2x
+
+
+ .ms-3x
+
+
+ .ms-4x
+
+
+ .ms-5x
+
+
+ .ms-6x
+
+
+
+
To conveniently increase the size of a mana or card symbol you can append the classes ms-2x, ms-3x, ms-4x, ms-4x, and ms-6x. These classes increase the size by a factor equal to class name number.
+
+ <i class="ms ms-r ss-2x"></i> ms-2x
+ <i class="ms ms-r ss-3x"></i> ms-3x
+ <i class="ms ms-r ss-4x"></i> ms-4x
+ <i class="ms ms-r ss-5x"></i> ms-5x
+ <i class="ms ms-r ss-6x"></i> ms-6x
+
+
Fixed Width
+
+ Planeswalker
+ Land
+
+
+
Some of the card symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width to a standard size, just append the class .ms-fw and the symbols will have a constant width and centered icon.
+
+ <i class="ss ss-planeswalker ss-fw"></i> Planeswalker symbol
+ <i class="ss ss-land ss-fw"></i> Land symbol
+
+