Icons
Icons are a great way to add interest to a page or to help add at-a-glance meaning to a chunk of content.
Font Awesome
Font Awesome is a service that provides an icon library built specifically for online use. The icons can be resized and recolored with no loss of quality, and there’s no need to save images and upload them to the server. They also look sharp on both HD and standard screens.
Check out the icons: Font Awesome version 6 (free)
Jump to a component:
Regular icons
If the icon is in a component (tabs, callouts, etc.), use the regular version.
Styling
Varies by use, see “example”.
How to use for Regular icons
Use the icon shortcode.
Development info for Regular icons
Stylesheet location:
/_source/styles/base/_typography.scss
Additional accessibility attributes are automatically added to the icon, so all you need is the following:
<i class="fa-solid fa-icon-name"></i>
Example of Regular icons
Round icons
If placed straight on the page rather than in a component, use a round icon. Round icons can be large, small, and as links. They’re common in features galleries.
Styling
Round icons are white with a round teal background, and can be large or small.
How to use for Round icons
Use the icon shortcode. Include class="round" for a larger icon or class="round round-small" for a smaller icon.
Development info for Round icons
Stylesheet location:
/_source/styles/base/_typography.scss
Additional accessibility attributes are automatically added to the icon, so all you need is the following:
<i class="fa-solid fa-icon-name round"></i> <!-- large round icon --> <i class="fa-solid fa-icon-name round round-small"></i> <!-- small round icon -->
Example of Round icons
PCC Marketing icons
If Font Awesome doesn’t have the icon you’re looking for, you can use an icon from the PCC Marketing’s iconography library, which is maintained by Marketing and Communications. Keep in mind that Font Awesome icons are much preferred for use on the website since they scale properly at various sizes and resolutions – only use one of these if there are no good alternate Font Awesome options, or for print.