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>
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>
New: You no longer need the .ms-split class name, simply identifying a split or hybrid cost will now automatically handle the split styles.
<i class="ms ms-wu ms-cost"></i>
<i class="ms ms-2b ms-cost ms-shadow"></i>
For backwards compatibility and full control you can still use create split and hybrid casting costs separately with the .ms-split class along with the 2-symbols' codes. This works for color pairs and the "2" with a color.
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>
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. Currently numbers 0-20 are supported for start, up, and down.
<i class="ms ms-loyalty-up ms-loyalty-3"></i>
<i class="ms ms-loyalty-down ms-loyalty-2"></i>
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 ms-2x"></i> ms-2x
<i class="ms ms-r ms-3x"></i> ms-3x
<i class="ms ms-r ms-4x"></i> ms-4x
<i class="ms ms-r ms-5x"></i> ms-5x
<i class="ms ms-r ms-6x"></i> ms-6x
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="ms ms-planeswalker ms-fw"></i> Planeswalker symbol
<i class="ms ms-land ms-fw"></i> Land symbol