Icons

The website has enabled a large network of icons called FontAwesome, which can be used on their own or in buttons, and include a wide variety of options.

A few examples:

Button with star icon.

Using the Icon HTML Code

The basic form of the code produces a black, regular sized icon. Just use the name attribute to choose which icon you’d like to display and add aria-hidden=”true” to have screen readers ignore the icon:

Code

<i class=”fa fa-institution” aria-hidden=”true”></i>


This HTML code produces:

Notice

You can view the full list of available icons at Font Awesome

Remember! the “fa-” from the name must be included for use of Awesome Font on Allegheny’s website.

Larger icons

To increase the size of an icon, add “fa-lg”, “fa-2x”, “fa-3x”, “fa-4x”, or “fa-5x” as part of the class.

Code

<i class=”fa fa-space-shuttle fa-3x” aria-hidden=”true”></i>

You can use the following options in the size attribute

No size specified:
Large:
2x:
3x:
4x:
5x:

Alignment

You can use icons as an image featured in the flow of regular text by adding a fa-pull to the class. The options are fa-pull-left or fa-pull-right.

Code

<i class=”fa fa-quote-left fa-pull-left” aria-hidden=”true”></i>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum quam vitae tortor ornare egestas. Nunc gravida hendrerit nisl et dictum. Quisque augue nunc, sodales in pulvinar non, ultricies vel quam. Nunc consequat urna non mollis varius. Sed hendrerit urna tempus convallis vestibulum. Mauris sagittis, nisl id eleifend pharetra, odio metus eleifend purus, id tincidunt nisl nibh nec dui. Phasellus mollis lobortis purus, et iaculis leo ornare ut. Ut pulvinar mollis purus. Sed rhoncus purus neque, vel tempor lectus egestas vel. In a aliquam ligula. Morbi euismod velit non molestie euismod. Morbi id iaculis libero, eget faucibus tortor.

Color

You can also change the color of an icon by adding color to the class.

Code

<i class=”fa fa-umbrella fa-2x ltblue” aria-hidden=”true”></i>

Example:

Available colors include: blue, ltblue, gold (or yellow), orange, pink, green, silver, copper, black, red, and drkblue.

Other attributes

There are several other options that can be added to icons by adding the attribute to the class.

Available attributes

fa-border creates bordered icons

Code

<i class=”fa fa-tachometer fa-2x fa-border” aria-hidden=”true”></i>


Example:

Use the fa-rotate-*  and fa-flip-* classes to arbitrarily rotate and flip icons.

Code

<i class=”fa fa-bold fa-2x fa-rotate-90″ aria-hidden=”true”></i>

<i class=”fa fa-bold fa-2x fa-flip-horizontal” aria-hidden=”true”></i>

Example:

Other variations are: rotate-180, rotate-270, flip-verticle

Tip

More options included with Font Awesome can be found here

Stacking

You can stack icons for more variety by enclosing multiple icons in the stacking code.

Code

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle fa-stack-2x yellow”></i>
<i class=”fa fa-camera fa-stack-1x”></i>
</span>

The previous code produces the camera icon on top of a circle:





A few things to pay attention to:

  • Generally, when stacking icons, one has to be larger than the other (for example, so an icon can fit inside of a circle). Use fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.
  • You control the size of the stacked icons by adding the size attribute to the stack span class: fa-lg, fa-2x, etc.

Other than these stipulations, icons behave the same way as before.

Icons in buttons


You can add icons to buttons by adding the icon attribute. You can view how to use buttons here.

Code

[button icon="angle-right"]Button Text[/button]

Previous code produces Button Text

Tip

You can have the icon appear on the right by using ialign=”right”

Tip

You can add the other standard attributes by using iatt=””. Note that many attributes might not work correctly in buttons.