Basic Icons

mi-r

You can use Magic the Gathering Font icons just about anywhere using the CSS Prefix mi and the icon's name. Magic the Gathering Font is designed to be used with inline elements (<i>).

<i class="mi mi-r"></i> mi-r

If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger Icons

mi-lg

mi-2x

mi-3x

mi-4x

mi-5x

To increase icon sizes relative to their container, use the mi-lg (33% increase), mi-2x, mi-3x, mi-4x, or mi-5x classes.

<i class="mi mi-r mi-lg"></i> mi-lg
<i class="mi mi-r mi-2x"></i> mi-2x
<i class="mi mi-r mi-3x"></i> mi-3x
<i class="mi mi-r mi-4x"></i> mi-4x
<i class="mi mi-r mi-5x"></i> mi-5x

If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Mana Icons

mi-r mi-mana

mi-r mi-mana mi-shadow

mi-p mi-mana-r

You can use create a mana symbol with any of the icons by adding the mi-mana class to a symbol. The WUBRG symbol are automatically colored. If you'd like to add a shadow to the mana icon, simply add the mi-shadow class. mi-mana-w, mi-mana-u and so forth are available to enforce the background color.

<i class="mi mi-r mi-mana"></i> mi-r mi-mana
<i class="mi mi-r mi-mana mi-shadow"></i> mi-r mi-mana mi-shadow
<i class="mi mi-p mi-mana-r"></i> mi-p mi-mana-r

Hybrid Mana Icons

mi-split -> mi-b mi-g

mi-split mi-shadow -> mi-b mi-g

mi-split -> mi-2 mi-g

You can create a hybrid mana symbol by creating a mi-split span and adding two mi-{color} icons inside. For colorless hybrid mana, simply use mi-{x}.

<span class="mi-split"><i class="mi mi-b"></i> <i class="mi mi-g"></i></span>
<span class="mi-split mi-shadow"><i class="mi mi-b"></i><i class="mi mi-g"></i></span>
<span class="mi-split"><i class="mi mi-2"></i><i class="mi mi-g"></i></span>