Code by Day | Explore By Weekend

How To 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.

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.

20

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Snake
5 months ago

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

Liz
Liz
3 months ago

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.

Emily
Emily
3 months ago

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

Emily
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
Reply to  Emily
2 months ago

Same! I am facing the same issue here.

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 4,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart