Web Icons

What are icon sets?

Icon sets are font and icon toolkits based on CSS. Icon sets can be used on websites by inserting a small code snippet where you'd like an icon to appear either adjacent to text or on its own. Some icon font libraries are also available to be used in print.

Which icons sets do I have to work with as a distributed campus user?

Font Awesome Pro

Font Awesome Pro is our new paid icon set and has a huge bank of icons to work with.

This new tool provides a number of advantages including:

• Many icons with different line weights
• Specialized subsets for topics like Covid-19 Awareness
• A common repository for distributed campus users to maintain consistent branding for our web icons

IcoMoon

UAB also uses a free version of an icon set called IcoMoon which has a limited number of icons and only one line weight. IcoMoon is part of all default Joomla installations and will continue to be available, so there is no need to change any references to it if you're currently using it in your content.

How can I use either icon set on my UAB website as a distributed campus user?

To use any icons within your content from either of our available icon sets, you'll need to attach a CSS class to an element.

For example, you could create a "contact us" button with a Font Awesome Pro icon using the code shown below:

Contact Us

<a href="#"><i class="far fa-envelope-open-text"></i> Contact Us</a>

You could also create a "contact us" button with an IcoMoon icon using the code shown below:

Contact Us

<a href="#"><i class="icon-envelope-opened"></i> Contact Us</a>

*Replace any reference to "#" with the URL where you would like your button to link.

Where do I find the list of class names for the two icon set options?

Font Awesome Pro class names

The Font Awesome Pro class names are all listed on their Cheatsheet Pro web page linked here.

IcoMoon class names