Fonticon Placement

  • Content Formatting, Tips & Tricks, Website Theme

Integrated in the NatSci website theme is a custom icon font that has over 300 icons to choose from that span many use scenarios.

The Benefits

Fonticons are a major peformance boost over traditional images. Icons are actually built mathematically, as a font. This is important, because they load very quickly for mobile users. Not to mention, all icons are loaded in one http request. Each file request (http request) that the browser needs to make has a fair amount of overhead associated. By combining files and using vector shapes (mathematically drawn) we gain flexibility, speed and feather-light web pages.

How to use

Before getting started, you will want to feel comfortable editing HTML.

A basic fonticon can be applied by:

  • Edit a page in Mura
  • In the content or summary section, click the Source button

    source button screenshot
  • Click in the text where you would like to place a fonticon and type <span class="fa fa-envelope">&nbsp;</span> (NOTE: &nbsp; equals a blank space)

    Fonticon code
     

      fa fa-envelope

  • Replace fa-* with any fa name found in the Font Icons Cheat Sheet.

So why the lone space...

Mura uses the ckeditor, an opensource HTML WISIWIG editor. By design, the ckeditor removes all empty HTML tags. This means that when you switch from WISIWIG mode to source mode, your font icons will be removed without the space!

Combining Icon Classes

The following classes can be mixed with icon tags (space separated) to create desired effects:

  • Rotation Modifiers
    • fa-rotate-90 Example:   <span class="fa fa-envelope fa-rotate-90">&nbsp;</span>
    • fa-rotate-180
    • fa-rotate-270
    • fa-flip-horizontal
    • fa-flip-vertical
  • Size Modifiers
    • fa-2x Example:   <span class="fa fa-envelope fa-2x">&nbsp;</span>
    • fa-3x
    • fa-4x
  • Other Modifier
    • fa-border
    • fa-spin
    • pull-left
    • pull-right

Accessibility Note: If you use the icon as a link, be sure to include text within the <a> tag.

Example: <a href="https://maps.msu.edu/interactive/index.php?location=ns"><span class="fa fa-map-marker">&nbsp;</span>5 Natural Science Building</a>

 5 Natural Science Building

Or you will need to add a screen reader class with an additional span tag: 

<a href="https://maps.msu.edu/interactive/index.php?location=ns"><span class="fa fa-map-marker">&nbsp;</span><span class="sr-only">Map marker</span></a>

 Map marker