Icons

Font Awesome icons can be added to your pages to provide subtle visuals for your content. These icons can be used in-line with text or to replace an image in templates.

Key Features

  • Versatile uses - can be placed on any content type with a WYSIWYG text editor
  • Multiple in-brand color options - several color options within GW's primary and secondary color palette are available
  • Multiple size options - available in five sizes

Use When

Font Awesome icons work best when they are used to call attention to a section of a page or stand in as a simple graphic.  

Best Practices

Icons should be used to highlight important sections of your content.

  1. Icons should always be in close proximity to other content; they are not intended to communicate much information on their own.
  2. Ensure that the size and style of the icon account for the other visuals on the page so as not to detract from other important content.
  3. Use of many icons on a page can become distracting to the visitor.

How to Add an Icon 

  1. Use the icon button (font awesome wysiwyg icon) in the WYSIWYG toolbar to add an icon to your page.
  2. Type the name of the icon you would like to use into the Name field. This can also be used as a search field to see available icons.
  3. Use the Additional Font Awesome Settings to select a size and color for the icon.

Example Icons

 
 

 

Colors

 

 Gray

 Green

 Dark Blue

 Light Blue

Icon used: fa-arrow-circle-right

 
 

 

Sizes

 

 Extra Small

 Small

 Medium

 Large

 Extra Large

Icon used: fa-chevron-circle-right

Buttons with Icons 

Font Awesome icons can be easily added to Button Links on either side of the button text using the icons tab. Here are some examples.

Recommended Icons

If there is another icon you need for a specific purpose, you can see all of the available icons on Font Awesome website. Keep in mind, not all of these icons are appropriate for university sites. If you have questions about which icons are appropriate contact our team.

Icon

Name

Icon Name
  fa-address-book    fa-book-open
  fa-comment   fa-chalkboard-teacher
  fa-check   fa-envelope
  fa-exclamation-triangle   fa-file
  fa-graduation-cap   fa-map-marker-alt
  fa-pencil-alt   fa-phone-alt
  fa-photo-video   fa-print
  fa-star   fa-times
  fa-user-graduate   fa-user-graduate

 

Social Icons in a Footer

Social Media icons can be added to the last column of a footer by checking the box for each platform and adding a link to your profile.
Note: Changes to the footer are managed via Blocks and only accessible to Site Admins.

Screenshot of a site footer highlighting the social media icons in the last column

 

Watch a Recorded Icons Training