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-v6/styles/base/_typography.scss
  • 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:

Regular icons

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

Regular icon examples
Regular icon development info
  • WordPress: use the icon shortcode: pcc-icon name="comments" (swap “comments” for your desired icon, and include the square brackets)
  • Outside WordPress: <i class="fas fa-comments"></i> (swap “comments” for your desired icon)

Round icons

If placed straight on the page rather than in a component, use a round icon. Round icons can be large, small, and links.

Round icon examples

Round:

Round small:

Round as link:

Round icon development info

Outside WordPress:

<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>

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>

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.