FontAwesome Icons

SUU uses FontAwesome. For a full list of icons as well as most usage instructions, refer to FontAwesome's Documentation. This page provides documentation of the additional styles SUU applies to FontAwesome icons on our website. FontAwesome also powers Link Icons.

SUU has a FontAwesome Pro License and currently uses v5.8.1.

Exceptions to FontAwesome Documentation

FontAwesome instructs users to structure their icons like such: <i class="fab fa-[icon-name]"></i>. However, because of accessibility requirements and CMS limitations, icons should be embedded with the following modifications:

• Rather than using <i>, icons should use <span>.
• Icons should be hidden from screen readers using aria-hidden="true".
• Cascade will not allow empty <span>s, so in most cases a "Word Joiner" character (&⁠#8288;) should be placed between the opening and closing tags.
  • In cases where an extra space following the icon is desired, a "Non-Breaking Space" character (&⁠#160;) should be used instead.

Thus, a proper icon would look like this: <span class="fab fa-[icon-name]" aria-hidden="true">&8288;</span>

Icon Colors

Colors are helpful in further identifying a brand, such as in the case of a social media icon, or simply in cases of aesthetic preference.

Generic Icon Colors

Social Media Icon Colors

Filetype Icon Colors

Customized Icons

From time to time, it may be necessary to further customize an icon beyond just its color. For cases like this, .custom-fa can be used. .custom-fa should not be used on its own, but in conjunction with another FontAwesome selector.

Currently only one customized icon is supported, but more may be added.