Font Awesome icons are probably the most used icons on the web and Divi WordPress theme by Elegant Themes is one of the most widely used WordPress themes. However, you cannot use Font Awesome icons in the out of box installation of DIVI theme. This means that if you simply assign a Font Awesome class to the icon, the icon will not show up.
At the time of writing of this article, Font Awesome has 634 unique icons in its library. Let’s take a look at two simple methods by which you can start using Font Awesome Icons within your Divi theme.
Font Awesome Icons CDN
The easiest and fastest way to start using Font Awesome library is to use the Font Awesome CDN. You do not need to download or install anything. All you need is to add a single line of code in the header.php file.
- Make sure you are working on Divi Child Theme.
- Copy the header.php file from the main Divi theme folder and paste it in the Divi Child Theme folder.
- Open the copied header.php file in a file editor like Notepad++ or any other editor of your choice for coding.
- In the <head> tag you need to add the following line at line number 29
<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” rel=”stylesheet”>
- Save and close the file. Upload the updated file to your Divi Child theme folder on server.
Download & Using CSS
If you do not want to use the Font Awesome CDN, you can download and host Font Awesome assets on your server.
- Download and copy the entire Font Awesome directory into your site directory.
- Follow the steps as mentioned above. Instead of adding the CDN path in the <head> tag, you will need to add your server path at line number 29
<link href=”path/to/font-awesome/css/font-awesome.min.css” rel=”stylesheet”>
- Save and close the file.
To start using Font Awesome Icons you just need to use the <i> or <span> tag using the CSS prefix fa and the icon’s name.