How To Connect And Add Font Awesome Icons To Divi Tutorial by Pee Aye Creative

How To Add Font Awesome To Divi

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.
Categories: Tutorials WordPress

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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
Integration
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

Conclusion

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.

52

Last updated Nov 4, 2021 @ 6:55 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

  1. Snake

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

    Reply
  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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  3. Emily

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

    Reply
      • 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)

        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.

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart