How to add Font Awesome icons to Divi

Jun 11, 2019 | Divi Theme, Fonts

Divi theme comes with 360 icons (you can find a preview of all the Divi icons here). You can use them, for example, in the blurb modules. But what if you wanted to use a different icon? For example, if you cannot find a suitable icon within the Divi ones. Or you may want to add icons to your menu links. This is not possible with the default Divi settings, but can be done with some custom coding. Here’s how you can do it with Font Awesome:

First you will need to create a Font Awesome kit on their website. Just go to https://fontawesome.com/start, enter your email and click on the “Send My Kit Code” button.

Font Awesome signup - enter email

After that you will receive an email from Font Awesome. You need to open it and click on the “Click to Confirm Your Email Address + Set Things Up” link in it to verify your email address.

Font Awesome account - confirm email

Now you will need to set your password for your new Font Awesome account.

set password for Font Awesome account

Enter the following details and click on the blue button.

fill out details for Font Awesome account

Your Font Awesome account is created.

Now you will need to copy the kit code by clicking on the blue “Copy Kit Code” icon.

link to copy Font Awesome kit code

You will need to enter this code into Divi Theme Options > Integration > Add code to the < head > of your Divi website.

Also make sure you have the option “Enable header code” enabled.

Font Awesome kit code pasted into Divi>Theme options>Integration

Now you will be able to add a Font Awesome icon (or more icons) to your Divi website.

To do so, look up the particular icon that you want to use on the “Icons” page of the Font Awesome website. Icons available with a free account are in dark grey. Icons requiring an upgraded “Pro” account are in light grey. Click on the icon you wish to use.

click on desired font awesome icon to select

With the desired version selected, copy the icon code (at top or via “Start Using This Icon” button) and insert it into a Divi code module.

get Font Awesome icon code

For example, we will use this one:

<i class=”fas fa-address-book”></i>

It will add a nice address book icon to our website.

Font Awesome address book icon

Note on Text fields and Modules:

You can also use the Font Awesome icon codes in a WordPress text field, however it can be fickle. When you switch back and forth from the text to visual tab in WordPress, because it may replace the empty <i> tag with a “&nbsp;” code. And that would cause your code to not work.

But the likely scenario when using it in a text field is in place of a list, like this.

To get this effect, we’ve just added the text in between the opening and closing <i> tags, like this:

<i class=”fas fa-address-book”> Add your text here</i>

Note on Style:

Font Awesome icons will inherit the body text style (size and colour) that is set in your “Divi>Theme Customizer – Typography” settings. If you want to change their style, you can do so with CSS.

 

Note on Menu Links:

We won’t properly cover menu links in this article. But you can actually simply use the font awesome code in your menu link labels:

For this effect:

However, we do find that the icon is slow to load and therefore not ideal. So if you need it, you may appreciate a simple way to achieve Font Awesome icons in menu links with a plugin and no need to learn code.

 

This is the end of this tutorial. We hope adding Font Awesome icons to your Divi website or blog will be a breeze now.

 

 

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules