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 can 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
Rachel Xidis
Director of Digital Strategy
rachelx@niu.edu