Skip to main content

Font Awesome is an iconic standalone vector font, initially developed for use with the Twitter Bootstrap front-end framework.

Font Awesome is an iconic font developed for use with the Twitter Bootstrap front-end framework.

Font Awesome is currently on version 4.7. For those who haven't updated or are unable to update to the latest version, the version 3.2.1 documentation is available here. To differentiate between versions look for the fa fa-[name] for ver 4.x, and icon-[name] for ver 3.x.

Version 4.1 was the first Font Awesome version that drops support of IE7 entirely, so you should not upgrade to it or any later version if your application must support IE7 browser.

Current version provides 675 font-icons in 16 groups (including 41 new icons in 4.7 branch):

  • Web Application Icons
  • Accessibility Icons
  • Hand Icons
  • Transportation Icons
  • Gender Icons
  • File Type Icons
  • Spinner Icons
  • Form Control Icons
  • Payment Icons
  • Chart Icons
  • Currency Icons
  • Text Editor Icons
  • Directional Icons
  • Video Player Icons
  • Brand Icons
  • Medical Icons

Font Awesome is purely built using scalable vector graphics, so it provides clear, smooth and scalable icons for use in different browsers and on different devices.

You can subset font-awesome using either icnfnt or fontello to create specific icon sets rather than downloading the entire family of icons. It's also available as a hosted file on a content delivery network BootstrapCDN (provided by MaxCDN company).

It is free for commercial use and licensed under the SIL Open Font License 1.1.

Syntax, ver 3.x (documentation):

icon-[name]

with some examples:

<i class="icon-cogs"></i>
<i class="bookmark-empty"></i> 
<i class="icon-facebook-sign"></i>
<i class="icon-arrow-left"></i>

Basic example

Where [name] can be found in icon list, and different extensions and modifications are found in the old documentation. See also issues when upgrading.

Syntax, ver 4.x (documentation):

fa fa-[name]-[shape]-[o]-[direction]

Where:

  • [name] is the name of the icon (icon list).
  • [shape] is the optional shape of the icon's background: either circle or square.
  • [o] is the optional outlined version of the icon.
  • [direction] is the direction in which certain icons point (arrows, etc.).

For example:

<i class="fa fa-cogs"></i>
<i class="fa fa-bookmark-o"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-arrow-left"></i>

Basic Example

As Font Awesome icons are font-based we can then apply our own styling on top:

i.fa {
    color: purple;
    font-size: 64px;
    padding: 5px 10px;
}

CSS-applied Example