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:
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
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 on our subsite for buttons.
Code
[button icon="angle-right"]Button Text[/button]
Previous code produces Button Text