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