Adding icons to your site with Font Awesome

Interested in using icons on your site but don’t want to host any images? Get away from image files by using Font Awesome‘s CSS icons. Here is a guide on how to download and use Font Awesome icons.

1. Go to Font Awesome and click the “Download” button in the middle of the screen.

   

2. A popup will appear asking if you would like use Font Awesome Pro (for a cost). I chose to stick with the basic version of Font Awesome, so I clicked the “No thanks, just download Font Awesome 4” button. This will download font-awesome-4.7.0.zip.

   

3. Once font-awesome-4.7.0.zip has been downloaded, unzip its contents into the directory of your choice (locally or on your web server).

   

4. Now that you have the files in place, you just need to add a reference to Font Awesome in your HTML. Use the following code (assuming your HTML file is one directory above/ outside of the Font Awesome “css” folder:

   <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

5. Once you have created the link to font-awesome.min.css, adding icons is simple. Here is example code that would show a dollar bill icon:

   <i class="fa fa-money" aria-hidden="true"></i>

6. You can see and search for all of the available icons here: The Icons.
7. There are numerous ways to enhance and customize the Font Awesome icons. Checkout the following documentation for that information: Examples.