• Examples

After you get everything set up, you can place Map Glyphs almost anywhere with a simple <i> tag.

Basic Map Glyphs

map-us

Place Map Glyphs just about anywhere using the CSS Prefix 'mg map-' and icon name (usually the country - region ISO code).

<i class="mg map-us"></i> map-us
  • If you change the font-size of the map glyph's container, the map glyph gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger Map Glyphs

mg-2x

mg-3x

mg-4x

mg-5x

Increase map icon sizes with mg-2x, mg-3x, mg-4x and mg-5x classes

<i class="mg map-us mg-2x"></i> mg-2x
<i class="mg map-us mg-3x"></i> mg-3x
<i class="mg map-us mg-4x"></i> mg-4x
<i class="mg map-us mg-5x"></i> mg-5x
  • If your map glyphs are getting chopped off on top and bottom, make sure you have sufficient line-height.

Fixed Width Map Glyphs

  Europe   The Americas   Asia   Africa

Use mg-fw to set map glyphs at a fixed width. Great to use when different map glyph widths throw off alignment. Quite handy for navs and lists.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="mg map-glb-eu mg-fw"></i>&nbsp; Europe</a>
  <a class="list-group-item" href="#"><i class="mg map-glb-am mg-fw"></i>&nbsp; The Americas</a>
  <a class="list-group-item" href="#"><i class="mg map-glb-as mg-fw"></i>&nbsp; Asia</a>
  <a class="list-group-item" href="#"><i class="mg map-glb-af mg-fw"></i>&nbsp; Africa</a>
</div>