Micon
Lots of easy ways to use Micon.

Basic Icons

mi-Settings :

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

note

  • You can place Micon icons just about anywhere using the CSS Prefix mi and the icon's name. Micon is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

  • 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 :

<i class="mi mi-Settings mi-lg"></i>

mi-2x :

<i class="mi mi-Settings mi-2x"></i>

mi-3x :

<i class="mi mi-Settings mi-3x"></i>

mi-4x :

<i class="mi mi-Settings mi-4x"></i>

mi-5x :

<i class="mi mi-Settings mi-5x"></i>

note

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

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

Fixed Width Icons

mi-fw :

<i class="mi mi-Settings mi-fw"></i>

note

  • Use mi-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

List Icons

  • List icons
  • can be used
  • as bullets
  • in lists
<ul class="mi-ul">
	<li><i class="mi-li mi mi-Settings"></i>List icons</li>
	<li><i class="mi-li mi mi-Send"></i>can be used</li>
	<li><i class="mi-li mi mi-Rotate mi-spin"></i>as bullets</li>
	<li><i class="mi-li mi mi-MyNetwork"></i>in lists</li>
</ul>

note

  • Use mi-ul and mi-li to easily replace default bullets in unordered lists.

Animated Icons

:

<i class="mi mi-Settings mi-spin"></i>
<i class="mi mi-Globe mi-pulse"></i>
<i class="mi mi-Refresh mi-spin"></i>

note

  • Use the mi-spin class to get any icon to rotate, and use mi-pulse to have it rotate with 8 steps. Works well with mi-Settings, mi-refresh, and more.

  • CSS3 animations aren't supported in IE8 - IE9.

  • Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect.

Rotated & Flipped

normal
mi-rotate-90
mi-rotate-180
mi-rotate-270
mi-flip-horizontal
icon-flip-vertical :

<i class="mi mi-SDCard"></i> normal<br>
<i class="mi mi-SDCard mi-rotate-90"></i> mi-rotate-90<br>
<i class="mi mi-SDCard mi-rotate-180"></i> mi-rotate-180<br>
<i class="mi mi-SDCard mi-rotate-270"></i> mi-rotate-270<br>
<i class="mi mi-SDCard mi-flip-horizontal"></i> mi-flip-horizontal<br>
<i class="mi mi-SDCard mi-flip-vertical"></i> icon-flip-vertical

note

  • To arbitrarily rotate and flip icons, use the mi-rotate-* and mi-flip-* classes.

Stacked Icons

mi-BlockedLegacy on mi-BodyCam :

<span class="mi-stack mi-lg">
	<i class="mi mi-BodyCam mi-stack-1x"></i>
	<i class="mi mi-BlockedLegacy mi-stack-2x text-danger"></i>
</span>

OR

mi-Heart on mi-HeartFill :

<span class="mi-stack mi-lg">
	<i class="mi mi-HeartFill mi-stack-1x  text-danger"></i>
	<i class="mi mi-Heart mi-stack-1x"></i>
</span>

note

  • To stack multiple icons, use the mi-stack class on the parent, the mi-stack-1x for the regularly sized icon, and mi-stack-2x for the larger icon. mi-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.