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:
- WordPress: use the icon shortcode
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:
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)
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 icon development info
<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.