Web services

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.

Icon development info

  • Stylesheet location: /_source/styles/base/_typography.scss
  • In WordPress, use the icon shortcode.

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)

Regular icons

If the icon is in a component (tabs, callouts, etc.), use the regular version.

Regular icon development info
  • In WordPress, use the icon shortcode.
  • In HTML, use <i class="fas fa-icon-name"></i>.
Regular icon examples
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.

Round icon development info

In HTML:

<i class="fas fa-coffee round"></i>
<i class="fas fa-coffee round round-small"></i>
<a href=""><i class="fas fa-coffee round"></i></a>

In WordPress, use the icon shortcode:

<!-- include the square brackets –
we can't put them here or the shortcode works! -->
pcc-icon name="coffee" class="round"
pcc-icon name="coffee" class="round round-small"
<a href="">pcc-icon name="coffee" class="round"</a>
Round icon examples

Round
coffee

Round – small
coffee

Round – as a link
coffee

Official PCC icons

If Font Awesome doesn’t have the icon you’re looking for, you can use an icon from the official PCC iconography library, which is maintained by Marketing and Communications. Keep in mind that Font Awesome icons are much preferred for use on the website – only use one of these if you really need one and there are no good alternate Font Awesome options.

These icons are better to use for printed materials – Font Awesome icons are for web use.