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. They can be used in both the Editorial and Classic Themes.

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

Use When

Font Awesome icons work best when they 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 

Icons can be added using the source code

The source/HTML view can be open via the Source button on the toolbar or by selecting the “PHP Code” or “Plain Text” option on the “Text Format” dropdown underneath the text editor.

In the source/HTML view, add code for each icon to the paragraph or image section where you want the icon to appear.

The code contains different sections that identify the type of icon, direction, size, or color

Example:

  <span class="fas fa-arrow-circle-right fa-2x gw-med-blue">&nbsp;</span>

Icons and Accessibility

When adding icons to pages it is important to make them accessible. This means adding labels when they are needed. Icons used simply as decorations do not need a label however if you are using the icon to communicate some kind of information that informations should be included in a label. For more information about this check out the Font Awesome Accessibility Page or contact our team.

Instructions for making sure a linked icon is detected by a screen reader see the section for advanced icon uses

 

Icons that communicate information need to be labeled to be fully accessible. These labels allow screen readers to describe the icon and what it is being used to represent. 

In the example below the icon is being used to link to a twitter feed. If the icon did not have a label someone using a screen reader may not be able to find it.

 

<a aria-label="Twitter icon link" href="https://www.twitter.com/" style="text-decoration:none;" target="_blank"><span class="gw-icon-twitter fa-2x">&nbsp;</span></a>

Icons that communicate information also need to be labeled to be fully accessible. These labels allow screen readers to describe the icon and what it is being used to represent. 

These icons are often not accompanied by any descriptive text or other context on the page. Examples could include icons being used to represent something in a table or key. In the example below the icons are being used to indicate whether or not a feature is included.

  Undergraduate Graduate
Programs Offered to Students

 

<span aria-label="Check mark icon" class="fas fa-check fa-2x gw-green" role="img">&nbsp;</span>

 

<span aria-label="X icon indicating no" class="fas fa-times fa-2x gw-med-blue" role="img">&nbsp;</span>

Icons used simply for decorations do not need to by given labels. These icons are typically used to add a visual aid for something else that is described on the same page. In most cases they are immediately followed by related text which provides a discription. 

In this example the icon is being used next to an email address. The icon is serving as a a visual for the email address and is not the only thing communicating information.

  [email protected]

Styling Icons

Font Awesome Icons can be styled in a number of way by changing their associated code. 

The code contains sections that identify the type of icon, direction, size, or color. These sections can be modified to produce the desired result.  

Example:

  <span class="fas fa-arrow-circle-right fa-2x gw-med-blue">&nbsp;</span>
  <span class="fas fa-arrow-circle-right fa-2x gw-green">&nbsp;</span>

Icon Sizes

Icons inherit the font-size of their parent container which allow them to match any text you might use with them. The size of an icon can be changed by adding or modifying the class of the code referencing an icon.

 

Extra Small

<span class="fas fa-arrow-circle-right fa-1x">&nbsp;</span>

 

Small <span class="fas fa-arrow-circle-right fa-lg">&nbsp;</span>

 

Medium <span class="fas fa-arrow-circle-right fa-3x">&nbsp;</span>

 

Large <span class="fas fa-arrow-circle-right fa-8x">&nbsp;</span>

Icon Colors

Similarly to size, Font Awesome icons inherit the color of their parent container. You can change the color by adding it to the end of the icon code. You can see examples of the colors that are accessible and within brand for the university. 

 

<span class="fas fa-arrow-circle-right fa-3x gw-grey">&nbsp;</span>

 

<span class="fas fa-arrow-circle-right fa-3x gw-dark-blue">&nbsp;</span>

 

<span class="fas fa-arrow-circle-right fa-3x gw-med-blue">&nbsp;</span>

 

<span class="fas fa-arrow-circle-right fa-3x gw-green">&nbsp;</span>

Icons in a List

You can use Font Awesome icons to replace bullets in lists. You can add the icon code to the list code like like the example below.

<ul class="fa-ul">

<li><span class="fas fa-arrow-circle-right">&nbsp;</span>Sunday</li>

<li><span class="fas fa-arrow-circle-right">&nbsp;</span>Monday</li>

<li><span class="fas fa-arrow-circle-right">&nbsp;</span>Tuesday</li>

<li><span class="fas fa-arrow-circle-right">&nbsp;</span>Wednesday</li>

</ul>

  •   Sunday
  •   Monday
  •   Tuesday
  •   Wednesday

 

Icons in a Button

You can use Font Awesome icons to add a design element in a button 

   GW Button            

<span class="reg-button green">

<a href="replace with link"><span class="fas fa-arrow-right fa-lg">
&nbsp;</span> button text</a>

</span>

Note: Icons in buttons without any descriptive text will need a label to be accessible.  

Example Icons

Arrows:

These icons point in a direction, so when you are adding them to your page you will need to identify which direction they point by adding it to the code. Below is an example of an "arrow pointing right" icon with it's corresponding source code next to it. 

 

<span class="fas fa-arrow-right fa-lg">&nbsp;</span>

Code for the icon can be modified by changing the word to "right" to "left", "up", or "down".

 

<span class="fas fa-arrow-left fa-lg">&nbsp;</span>

 

<span class="fas fa-arrow-up fa-lg">&nbsp;</span>
  <span class="fas fa-arrow-down fa-lg">&nbsp;</span>

These are other arrows that can be modified in the same way. 

 

<span class="fas fa-angle-double-right fa-lg">&nbsp;</span>

 

<span class="fas fa-arrow-circle-right fa-lg">&nbsp;</span>

 

<span class="fas fa-caret-right fa-lg">&nbsp;</span>

 

Other Recommended Icons:

 

<span class="fas fa-address-book fa-lg">&nbsp;</span>

 

<span class="fas fa-comment fa-lg">&nbsp;</span>

 

<span class="fas fa-envelope fa-lg">&nbsp;</span>

 

<span class="fas fa-exclamation-triangle fa-lg">&nbsp;</span>

 

<span class="fas fa-file fa-lg">&nbsp;</span>

 

<span class="fas fa-map-marker-alt fa-lg">&nbsp;</span>

 

<span class="fas fa-pencil-alt fa-lg">&nbsp;</span>

 

<span class="fas fa-phone-alt fa-lg">&nbsp;</span>

 

<span class="fas fa-photo-video fa-lg">&nbsp;</span>

 

<span class="fas fa-print fa-lg">&nbsp;</span>

 

<span class="fas fa-user fa-lg">&nbsp;</span>

 

<span class="fas fa-star fa-lg">&nbsp;</span>

 

<span class="fas fa-check fa-lg">&nbsp;</span>

 

<span class="fas fa-times fa-lg">&nbsp;</span>

If there is another icon you need for a specific purpose you font awesome has a cheatsheet where you can find more options. 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.

Social Icons in a Footer

You can copy and paste the following into the source for your footer and replace the links with your social accounts. These are Informational Icons with no text to explain what they are so they are set up with labels.
 

       

 

<p>
  <a aria-label="Facebook icon link" href="https://www.facebook.com/ "target="_blank" style="text-decoration:none;">
    <span class="gw-icon-facebook fa-2x" title="GW Facebook">&nbsp;</span>
  </a>
  <a aria-label="Instagram icon link" href="https://www.instagram.com/" target="_blank" style="text-decoration:none;">
    <span class="gw-icon-instagram fa-2x" title="GW Instagram">&nbsp;</span>
  </a>
  <a aria-label="Twitter icon link" href="https://www.twitter.com/" target="_blank" style="text-decoration:none;">
    <span class="gw-icon-twitter fa-2x" title="GW Twitter">&nbsp;</span>
  </a>
   <a aria-label="Youtube icon link" href="https://www.youtube.com/" target="_blank" style="text-decoration:none;">
    <span class="gw-icon-youtube fa-2x" title="GW Youtube">&nbsp;</span>
  </a>
</p>

 

Advanced Icon Uses

Font Awesome Icons can be used in a number of ways not described on this page. If you are interested in using them in different ways on your website contact our team or book an office hours session for assistance.

Some examples include:

Icons as a Link 
 

 

Description Text
 

 

Description Text

 

Description Text

 

Animated Icons

 

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor