Newer versions of our website have access to the Font Awesome icon library.
To use Font Awesome'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 .
Any icon can be used on any site, however, some may require additional javascript depending on your site's theme. Please contact us at webcommunications@niu.edu if you need assistance.
We have the added Social Media icons that we will use in place of linked thumnail images. 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="fab fa-facebook-f" data-toggle="tooltip" title="Facebook"></i></a> will give you .
The hover effect styles are applied to the following common social media icons:
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.
Some of our older website themes use a previous version of Bootstrap, which utilized 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.
Web and Internal Communications
Holly Nicholson
Assistant Director of Web Communications
hnicholson@niu.edu