Icons

Using Icons

PEGASUS utilizes Font Awesome 5 which includes over 1,500 icons to help add visual elements and variation to your page designs.

To call an icon:

1. Identify which icon you want to use (see full list of available icons). The chosen icon will indicate:
   • An icon category class (.fas, .far, or .fab, see what these mean below)
   • and the individual icon class (always starting with .fa-*).
2. Create a <span> with the .ico class.
3. Then add the icon category class and individual icon class for the chosen icon.
4. Because most icons are decorative and do not carry extra meaning, aria-hidden="true" should also be included. Learn more about accessible icons below.

Example:

<span aria-hidden="true" class="ico fa* fa-***"></span>

See Full List of Available Icons

About Icon Categories

The list of available Font Awesome 5 icons for use in PEGASUS are broken into three different categories of:

Solid

   

There are 999 regular icons. They are bold and solid. .fas is the class for solid icons.

Most of the icons used in PEGASUS are solid.

Regular

   

There are only 151 regular icons. They are lighter, outline versions of many (but not all) of the solid icons. .far is the class for regular icons.

Brand

   

There are 448 brand icons. They are comprised of logos and symbols directly tied to brands and corporations. .fab is the class for brand icons.

All social media icons are found in brand.

Accessible Icons

Icons for Decoration

As mentioned above, most icon uses are simply for decoration or styling for adjacent text or content. These instances do not add any extra meaning to the content. This means we should signal to screen readers not to read the icon. We do this by adding aria-hidden="true".

<span aria-hidden="true" class="ico fas fa-user"></span>

Icons to Convey Meaning

If the icon needs to convey meaning to the context or interface and has no adjacent text or content that already explains its meaning, be sure to label the icons correctly by using the aria-label attribute with a text description on the interactive element.

<span aria-label="Twitter Account" class="ico fab fa-twitter"></span> @dallascollege_tex

Modifying Icons

Modifying Color

Icons are a type of font so can be styled like any other block of text. You can change the color of icons by applying any of .text-c* classes to the <span> itself (or a parent element):

<span aria-hidden="true" class="ico fas fa-user-circle text-cprimary"></span> Login

<span aria-hidden="true" class="ico fas fa-user-circle text-csecondary"></span> Login

<span aria-hidden="true" class="ico fas fa-user-circle text-cgrey"></span> Login

Modifying Size

You can change the size of icons by applying any of the following classes to the <span> itself:

<span aria-hidden="true" class="ico fas fa-user-circle icon-2x"></span>

Modifying Position

Whether you are using icons in a button or inline next to text, you can apply either of the following classes to add appropriate spacing:

• .ico-left - adds extra margin to the right side of an icon
• .ico-right - adds extra margin to the left side of an icon

<a href="#">
    <span class="ico fas fa-check" aria-hidden="true"></span>Apply Now!
</a>

<a href="#">
    <span class="ico fas fa-check ico-left" aria-hidden="true"></span>Apply Now!
</a>

<a href="#">
    Apply Now!<span class="ico fas fa-check ico-right" aria-hidden="true"></span>
</a>

Icons in a List

It is possible to use any Font Awesome icon as bullet in a <ul>.

<ul class="fa-ul">
    <li><span class="fa-li"><span class="ico fas fa-check-square"></span></span>List icons can</li>
    <li><span class="fa-li"><span class="ico fas fa-arrow-circle-right"></span></span>be used to</li>
    <li><span class="fa-li"><span class="ico fas fa-spinner"></span></span>replace bullets</li>
    <li><span class="fa-li"><span class="ico far fa-square"></span></span>in lists</li>
</ul>