Examples

Introduction To Various Functions Of MellowGlyph

Useful classes are available to MellowGlyph.
It makes easier to display icons as if writing words.

Default

Uses <i> tag for icon display. Write MellowGlyph CSS Prefix "mg" and the "icon's class name" as class of <i> tag.

<i class="mg mg-caret-circle-o-right"></i>

Scale

Uses "mg-(Integer)x" for icon scaling. The maximum value of the Integer that can be written is 10.

<i class="mg mg-2x mg-mushroom"></i>
<i class="mg mg-4x mg-mushroom"></i>
<i class="mg mg-6x mg-mushroom"></i>
<i class="mg mg-8x mg-mushroom"></i>
<i class="mg mg-10x mg-mushroom"></i>

Rotate

Uses "mg-rotate-(digrees)" for icon rotation. The minimum value of degrees is 45. This means that the maximum value is 315.

Default

<i class="mg mg-arrow-alt-up"></i>

Rotate

<i class="mg mg-rotate-90 mg-arrow-alt-up"></i>
<i class="mg mg-rotate-180 mg-arrow-alt-up"></i>
<i class="mg mg-rotate-270 mg-arrow-alt-up"></i>

Flip

Icons are possible to reverse if uses the "mg-flip-horizontal" or the "mg-flip-vertical" class.

Default

<i class="mg mg-location-arrow"></i>

Horizontal

<i class="mg mg-flip-horizontal mg-location-arrow"></i>

Vertical

<i class="mg mg-flip-vertical mg-location-arrow"></i>

List

If you want to use the icon as list-style, you can use the "mg-ul" and the "mg-li" class. For proper display, these classes are preferably used in a set.

  • Home
  • Library
  • Link
  • Setting
<ul class="mg-ul">
  <li><i class="mg-li mg mg-home"></i>Home</li>
  <li><i class="mg-li mg mg-book"></i>Library</li>
  <li><i class="mg-li mg mg-link"></i>Link</li>
  <li><i class="mg-li mg mg-gear"></i>Setting</li>
</ul>

Animation

Flashing and Spinning animation has been implemented in CSS of MellowGlyph. You can run these animations without delay.

Flashing

<i class="mg mg-sleep mg-power"></i>
<i class="mg mg-pulse mg-exclamation-circle-o"></i>

Spinning

<i class="mg mg-spin-left mg-rotation-left"></i>
<i class="mg mg-spin-right mg-rotation-right"></i>

Border

To add a border to the edge of the icon, you use the "mg-border".

Default

<i class="mg mg-gavel"></i>

Bordered

<i class="mg mg-border mg-gavel"></i>