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.
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
<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
Version 4 would use the prefix
fa followed by the icon name:
<i class="fa fa-check-square"></i>
Version 6 uses
fas followed by the icon name. The
s stands for “solid”. Some icons also have a “regular” version accessed by using
<i class="fas fa-file-code"></i> <i class="far fa-file-code"></i>
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:
- Used to place a border around an icon.
- Used to flip an icon on the horizontal or vertical axis.
- Sets an icon to a fixed width.
- Used with the fa-ul class to create custom bullets in unordered lists.
- Adjusts the icon size relative to its container.
- Puts the icon to the left-side or right-side of its container and allows contents to flow around it.
- Causes any icon to rotate with 8 discrete steps.
- Used to rotate an icon 90, 180, or 270 degrees.
- Causes any icon to rotate.
- Stacks icons on top of each other.
- Used with the fa-li class to create custom bullets in unordered lists.