This page is taken from ASSETS documentation and is presented as an example for the correct use of font icons.

This template supports the Font Awesome icon set.

All icons by Font Awesome are available, for complete list go via the links provided down the page.

Remember this is an accessible template:
If the Font Glyph conveys meaning (for example if it is used as a status icon or a linked icon), then the meaning must be provided in text using the sr-only class / use the AdobeBlank font (invisible on seeing computers) so that it is available for assistive technologies. The following example shows the telephone icon with a text alternative that is visually hidden, but available for assistive technologies.

Source code sr-only class example: 
<span aria-hidden="true">
    <em class="fa fa-phone"></em>
</span>
<span class="sr-only">Telephone</span> 202 444-8888

This would create the following icon with hidden text that is announced correctly by assistive technologies.

Telephone 202 444-8888

Icon Example

  • fa fa-envelope
  • fa fa-suitcase
  • fa fa-medkit
  • fa fa-calendar
  • fa fa-circle-o
  • fa fa-angle-down
  • fa fa-sort-alpha-asc
  • fa fa-angle-left
  • fa fa-angle-right
  • fa fa-angle-up
  • fa fa-check
  • fa fa-angle-double-left
  • fa fa-angle-double-right
  • fa fa-angle-double-up
  • fa fa-angle-double-down
  • fa fa-circle

For more icons and usage, please see Font Awesome icons pageThis link opens a new window or tab. To use different sizes and with other components, please see the Font Awesome examples pageThis link opens a new window or tab.