This will demonstrate how to install and use the Font Awesome free icon pack. The files will be hosted on your own server without using a CDN. We will look at the minimal installation with the least amount of files for maximum efficiency.
Start by going to the download page and download the latest zip release.
At the time of this writing, the latest release is v5.9.0 and the direct download link is: https://use.fontawesome.com/releases/v5.9.0/fontawesome-free-5.9.0-web.zip
They have a free package and a premium package. The free version includes over 1,000 icons and the paid package has over 5,000 icons including different style variations. You can browse the available free icons in the gallery of free solid icons
Place files in webroot
You will need to put at a minimum the proper CSS files and webfont file
in the public webroot of your web application.
The solid icons are free and the only ones I am going to use in this example.
The required files are
In this example, the css will go in
css/ and the font in
The CSS directory is not required to be named
css/ and is not required
to go in the root of your public directory, but the webfonts must
go in a directory named
webfonts/ that lives next to the directory containing
your CSS files because the CSS files reference the webfonts directory with
../webfonts/. For example, you could put the CSS in
and the webfonts in
For example, my public webroot directory looks like this:
For maximum compatibility across browsers and devices, you might want to copy over all of the
fa-solid-900.* fonts including the
but technically you only need one that works. The
formats are the most widely supported.
Link the stylesheets
<head> of your web page, include a link to the CSS files needed.
At minimum you need the fontawesome and icon stylesheets like this:
<html> <head> <link href="/css/fontawesome.min.css" rel="stylesheet"> <link href="/css/solid.min.css" rel="stylesheet"> </head> <body> </body> </html>
Use the icons
To see which icons are available, browse the
gallery of free solid icons
on the official webpage or view the available styles in
Here is an example of how to use the an icon with a
<span class="fas fa-delete"></span>
You can adjust the size by modifying the
Use percentages or
em to modify the relative size.
<span class="fas fa-delete" style="font-size: 150%;"></span> <span class="fas fa-delete" style="font-size: 1.5em;"></span>
To make a link, just drop the span inside the anchor:
<a href="/"><span class="fas fa-home"></span></a>
After reading this you should be able to install and self-host the free icon pack from Font Awesome to use icons in your web page.