Font Awesome

BrandonDusch's avatar
Published Aug 1, 2022Updated Apr 27, 2023
Contribute to Docs

Font Awesome is an icon toolkit for the web, based on CSS and Less. It was developed by Dave Gandy in 2012 (originally for sites that used Bootstrap). The latest release is version 6 (February 2022). The first four versions (1-4) were free to use; all releases of Font Awesome since then (5 & 6) have paid and free versions.

The free versions of Font Awesome is open source and General Public License (GLP) friendly.

Syntax

Font Awesome is commonly used via HTML by including a line in the <head> element of the web page. This allows the use of the Font Awesome icons and their CSS modifiers. The line to include will differ depending on the version being used.

For version 4, it is referenced in a <link> element via CDN:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
  />
</head>

The free part of version 6 requires a “Kit Code” that can be retrieved by signing up for a Font Awesome account. The “Kit Code” can then be referenced in a <script> element:

<head>
  <script
    src="https://kit.fontawesome.com/kitcode.js"
    crossorigin="anonymous"
  ></script>
</head>

Using Font Awesome

Utilizing the fonts and features of Font Awesome require applying different class names to HTML elements on the page. The icons themselves are designed to use inline elements and are displayed with an <i> element.

Version 4 would use the prefix fa followed by the icon name:

<i class="fa fa-check-square"></i>

Font Awesome Check Icon

Version 6 uses fas followed by the icon name. The s stands for “solid”. Some icons also have a “regular” version accessed by using far instead:

<i class="fas fa-file-code"></i> <i class="far fa-file-code"></i>

Font Awesome Code File Icons

There are several different values that can be added to the class attribute to modify the appearance of the Font Awesome icons. Several are listed below:

Font Awesome

fa-border
Used to place a border around an icon.
fa-flip
Used to flip an icon on the horizontal or vertical axis.
fa-fw
Sets an icon to a fixed width.
fa-li
Used with the fa-ul class to create custom bullets in unordered lists.
fa-Nx
Adjusts the icon size relative to its container.
fa-pull
Puts the icon to the left-side or right-side of its container and allows contents to flow around it.
fa-pulse
Causes any icon to rotate with 8 discrete steps.
fa-rotate
Used to rotate an icon 90, 180, or 270 degrees.
fa-spin
Causes any icon to rotate.
fa-stack
Stacks icons on top of each other.
fa-ul
Used with the fa-li class to create custom bullets in unordered lists.

All contributors

Contribute to Docs

Learn Open Source on Codecademy