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


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.





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.

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>