Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Font Awesome To Divi

Nelson Miller Profile Orange
This guide will show you how to add Fontawesome icons to your Divi website either with a plugin or by manually integrating with the Divi theme options.

▶️ Please watch the video above to get all the exciting details! 👆

Font Awesome Icons

There are other icon font libraries out there, but none of them compare to Font Awesome. Thousands of icons and logos can found here and integrated into your Divi website. There are two obvious reasons to add Font Awesome to your Divi site:

  • Font Awesome is free
  • It is straightforward to add Font Awesome to Divi site

If you think that you can simply add images instead of Font Awesome logos and icons, you need to know that vectors are a way better choice than the images. You don’t need to compress the Font Awesome vectors, and these will not affect the loading speed of your website. You can add them in many different ways, making them very versatile.

The Font Awesome icon library has all kinds of icons that you are going to use on your website. If you don’t know how to add Font Awesome to your Divi website, stay with us, and we will go through step by step guide.

Installing The Font Awesome Plugin

We will show you how to integrate Font Awesome manually into your Divi website, but first,  I wanted to let you know there is an easy way. This would be great for beginners who want to avoid adding code to Divi, but not the best choice if you are trying to keep your plugin count to a minimum.

Font Awesome now has their own WordPress plugin. You can install the Font Awesome plugin like any other plugin for your Divi website by going to Plugins>Add New and searching for it.

Install the Font Awesome plugin in Divi

Adding Font Awesome To Divi Manually

The other way to add Font Awesome to your Divi website is to use the manual integration. First, you need to visit the official Font Awesome website. Be sure to check out their pro plan which has some great features, but for this tutorial and the tutorials that will follow, we will be using the free version.

Once you have chosen the desired plan, free or paid, the next step is to add the Font Awesome integration code to your Divi website. The free plan has over 1,588 free icons, and the pro plan has over 7,842 icons.

how to add Font Awesome to Divi

The next step is simple, and you just need to copy the code from the Font Awesome website and paste it in the Divi site. Make sure that you have selected the Webfont option on the tab.

copy the Font Awesome CDN code to copy into Divi

I’m not going to walk you through every single step, because it is pretty self explanatory, but here are some of the buttons to look for and the steps to take.

Start Using Free

Sign Up Email

Confirm Email

Create Password

The next step will ask you some questions, but you can skip it.

Copy Kit Code

 Once you have copied the code from the Font Awesome website, you can add this code to any template or theme. As we are concerned with adding Font Awesome to Divi theme, you need to:

Go to themes option
Paste the code in the field “Add code to the head of your blog.”

Once you have saved the edits to the code, the Font Awesome will be added to your Divi site, and you can start using the awesome icons on your site.

Add your Font Awesome code to the Divi integrations tab


A site without amazing icons and logos looks dull. If you want to get the attention of your readers, you need to make the website amazing and attractive with free Font Awesome icons. Adding Font Awesome to the Divi theme is easy as we have covered almost every aspect that you need to know. If you are not already using Font Awesome for the Divi site, add Font Awesome to site right with this easy guide.

Categories: Tutorials WordPress

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Snake

    I think this article might need updating, as the code fontawesome gives you is Javascript not a link tag.

  2. Liz

    Thanks for the articles. How do you add Font Awesome to Divi Builder. I tried adding the plugin, but it doesn’t work for Divi Builder. I tried manually, but there is no Integration section only “Post Type Integration” and there is no place to add code for Divi Builder. How do we add Font Awesome to Divi Builder page or header so that we can “Add a different Icon using your code” . I keep getting a box when I tried to replace the Skype to make it a Yelp icon.

    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Liz,
      I’m not sure what you mean by all of that, but all you have to do is add the plugin. As far as icons, that is not covered in this tutorial as this is only about adding the integration. There could be a number of things wrong, and without your code I have no clue. Make sure you are using things like “Font Awesome 5 Brands” in your code, they are very picky and it has to be the exact righ thing.

  3. Emily

    I am trying to put a link, browser or a globe icon and none of them work.
    Do you know why that is?

      • Emily

        So I am trying to put the “link” icon and I am using this code :

        .et-social-rss a.icon:before {
        content: “\xxxx”;
        font-family: “Font Awesome 5 Brands”!important;

        and I changed the “xxxx” for “f0c1”

        but the icon doesn’t appear on my page, it’s just a black square.

        When I use the same code but put social media icons it works.

      • Nazreen Daud

        Same! I am facing the same issue here.

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        Hi Emily,
        More than likely this is due to the use of “Brands” in your code. The Brands only works for…brands. For they have other naming conventions for other things, like “Free”. You can see this when you go to Font Awesome and click on the icon, it will tell you which family it is part of.

  4. Dwayne

    Worked great. Thanks for the detailed post

  5. Mark

    Are there any new methods for getting Font Awesome Pro icons (or custom icons) to appear in the the Divi builder icon picker? I have been using this basic method for adding icons to content blocks for some time as a stop gap, but I would really like the the icons to be available in the picker.


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts


Your Cart