Font Awesome
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>
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>
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.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.