Skip navigation

Glyphicons

For our current version of Bootstrap, we have access to Glyphicon Halflings. View the full set.

Bootstrap icons can be used by typing the glyphicon name provided as a class for a <span> tag in the HTML editor.

Ex.

<span class="glyphicon glyphicon-chevron-right"></span> 

will give you

Font Awesome

Newer versions of Bootstrap no longer include the Glyphicon Halflings, so we have added FontAwesome to our collection to use. With FontAwesome, we have the added Social Media icons that we will use in place of linked thumnail images. View the entire collection of icons.

To use FontAwesome's icons out of the box, use the icon's class in an <i> tag. 

Ex.

<i class="fa fa-bookmark" aria-hidden="true"></i>

will give you 

Social Icons

While the Font Awesome icons be used out-of-box, we have also added some styling for the most commonly used social media icons, only. This styling adds color and a hover effect.

To use the FA social icons with this effect, make sure the <i> tags are wrapped in an element using the "social" class.

Ex.

<a class="social" href="www.facebook.com"><i aria-hidden="true" class="fa fa-facebook"></i></a>

will give you

The hover effect styles are applied to the following common social media icons:

  • Facebook (fa fa-facebook) to be used for Facebook pages; or (fa fa-facebook-square) to be used for Facebook groups
  • Twitter (fa fa-twitter)
  • Google Plus (fa fa-google-plus)
  • Github (fa fa-github)
  • Pinterest (fa fa-pinterest)
  • LinkedIn (fa fa-linkedin)
  • Flickr (fa fa-flickr)
  • Instagram (fa fa-instagram)
  • Vimeo (fa fa-vimeo)
  • Tumblr (fa fa-tumblr)
  • Skype (fa fa-skype)
  • YouTube (fa fa-youtube); or (fa fa-youtube-play)
  • Blogger (fa fa-blogger)
  • WordPress (fa fa-wordpress)
  • Snapchat (fa-snapchat-ghost)
  • RSS (fa fa-rss)

If there is another social media or brand icon that you use frequently and would like to use it with the hover effect, contact webcommunications@niu.edu with a link to the icon in the Font Awesome collection.