Font Awesome Icons

The SOM web system includes access to Font Awesome (version 5.14.4), which provides a library of icons that can be used to enhance content. Only free icons available in Font Awesome 5.14.4 are supported.

Note that icons can also be added using the Cells plugin. The Icon Nav Bar and Icon Boxes options include built-in icon support and are often easier to use while providing more consistent styling.

1. Add an Icon

Font Awesome icons are added using shortcode.

[icon type="far fa-calendar-alt"]

Copy and paste this shortcode into your page where you want the icon to appear.

2. Change the Icon

1. Go to the Font Awesome icon library.
2. Find the icon you want to use (ensure it is one of the free icons in version 5.14.4).
3. Copy the icon’s full class name (example: far fa-calendar-alt).
4. Paste it into the existing shortcode, replacing the existing class name (far fa-calendar-alt).

Example:

[icon type="fas fa-virus"]

Icon Styles

Font Awesome uses different prefixes depending on the icon style:

• fas – solid icons (most commonly used)
• far – regular (outlined) icons
• fab – brand icons (social media, etc.)

3. Set the Icon Size

Icon size is controlled by adding any of the following classes to the type value in the shortcode. Simply add a space after the icon name and add the icon size. If no size is specified, it defaults to fa-1x.

Example

[icon type="far fa-calendar-alt fa-2x"]

4. Change the Icon Color

To change the icon color, add a hexadecimal color value to the shortcode using the format color=”#257cb7″. Refer to our Color and Contrast documentation for approved theme colors and guidance on meeting accessible contrast requirements.

Example

Code Examples

Accessibility Considerations

Icons should support content, not replace it.

• Include text alongside icons
• Do not rely on icons alone to convey meaning
• Screen readers may not interpret icons correctly
• Ensure sufficient color contrast between the icon and it’s background color