How to Add Font Awesome to Divi

Divi includes 380 icons by default that can be used in any of the Divi modules. If you want access to more icons then you can use a free icon set called Font Awesome.

Do you want to add Font Awesome icons to your Divi-built websites? Are you looking for a way to insert Font Awesome icons on your pages and posts? If yes, then here’s a detailed guide going over how to add Font Awesome to Divi.

What is Font Awesome?

Font Awesome Icons

Font Awesome is one of the most popular icon toolkits based on CSS and Less. It gives you access to 1600+ high-quality icons for free (Pro users have access to 7000+ icons), covering almost any shape or brand you can think of. Furthermore, all icons are created using scalable vectors that work perfectly on any screen size.

Another important bit about Font Awesome is that all their icons are served to users via a Content Delivery Network.

Typically, WordPress users who want to use Font Awesome icons need to install the Font Awesome plugin. Once done, they can copy-paste the Icon shortcode or HTML code into their content to add the icon.

However, there’s an easier way of doing this that doesn’t involve installing any unnecessary plugins.

All you have to do is create a Font Awesome account, and you will be given a Kit Code. Copy and paste the Kit Code into the section of each page or template on your WordPress website. Once done, those pages and templates will read the Font Awesome shortcodes and show the icons.

Naturally, this can get a bit tedious and cumbersome for non-tech savvy users. But for Divi users, the process is super simple and user-friendly. There’s a dedicated field inside the Divi Theme Options where you can copy and paste the code. This will allow you to use Font Awesome Icons throughout your website.

Here is how you can do it!

Add Font Awesome to Divi using Kit Code

First things first, you need to create a new Font Awesome account. To do this, head over to the Font Awesome official website and enter your email address.

Create Font Awesome Account

You will get a confirmation email sent to your registered email address, where you will find the account setup link.

After creating your account, you should see an interface similar to the one we have in the image.

Font Awesome Kit Code

As you can see, the first thing you will get access to is your Kit Code. Scroll down, and you will also find the option to add icons and icon styles to this kit (or project) as well. Alternatively, you can also log in to your Font Awesome account, click on Kits, and from there, either open a pre-existing Kit or create a new one.

After copying the Kit Code, log in to your WordPress backend dashboard. Now from the lefthand sidebar, navigate to Divi’s integration area in Divi > Theme Options > Integration. Next, you will need to paste the Kit Code into the “Add code to the < head > of your blog.” Here’s an image showing you just where you’ll find this option.

Divi Header Code Integration

Once done, scroll down, hit the Save Changes button, and that’s it! You have successfully enabled Font Awesome icons on your Divi website.

Simple, isn’t it?

How to Add Font Awesome to Divi Website Content

Now that you have added Font Awesome support on your Divi website, how can you add the icons to your Divi website content?

As we mentioned earlier, you will need to copy and paste the icon shortcodes into your website content. To get these shortcodes, you will need to log in to your Font Awesome account and click on the Icons tab on the top menu.

This will take you to their icon library. You can finetune your search using the left-side filter options, or you can use the search bar to find a particular Font Awesome icon. For the sake of this guide, we are going to use the “Rocket” icon.

Search for Font Awesome Icons

Once you have picked the Icon you intend to use, click on it, and it will take you to an icon customization panel.

Font Awesome Icon Customization

After customizing the Icon, click the “Start Using This Icon” button, and you will get access to the icon shortcode.

Font Awesome Icon Shortcode

Copy the code into your clipboard and head on over to your WordPress website.

Note: You can customize the icons by tweaking the icon shortcode. Here are some example codes to show you how it’s done.

With the Font Awesome Icon shortcode copied to your clipboard, open a WordPress page or post where you want to add the icon. For the sake of this example, let’s add the Rocket icon next to the “Contact Us” title section.

Divi Contact Us Page

To do this, we first select the “text” module containing the Contact Us paragraph, go to its settings, and then under the Text section, switch over from “visual” to “text.” This will give you an HTML view of the Text module. Now, enter the Font Awesome icon shortcode here within the section, and that’s it!

Add Font Awesome Icon to Divi Text Module

You can also head over to the Design section for the Text module and then tweak how it looks using Divi’s customization settings.

Customize Icon Using Divi

Cool, isn’t it?

In fact, you can add the Font Awesome Icons to practically any Divi Module or widget that either accepts HTML code or has an option for inline styling.

Wrapping Up

So this was our quick tutorial on how to add Font Awesome to Divi. Divi comes with a huge number of fonts and a reasonable number of icons too, but you may need more. As you can see, the process is super simple yet really awesome. The main advantage of using Font Awesome icons with Divi is that its compatible with Divi’s customization settings. You can tweak and stylize the icons using the design settings of the Divi module in which you inserted them.

Now coming to inserting the Font Awesome Icons, all you need to do is create a Font Awesome account, get your Kit Code, and then paste it in the Header section of your WordPress via Divi’s Integration tab.

Once done, copy and paste the shortcodes for the Font Awesome Icons you want to have on your Divi-powered website. Just make sure that you are pasting the shortcode into modules that support HTML code or inline styling. If the module doesn’t support it, the shortcode won’t transform into the Font Awesome icon. Instead, it will present to your readers as the shortcode.