Select Page

Divi Font Awesome Icons: How to Add Them (Full Guide)

  1. Home
  2. »
  3. Divi
  4. »
  5. Divi Font Awesome Icons: How to Add Them (Full Guide)

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

divi font awesome
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Looking for a full guide about Divi font awesome icons? and How to add them?

You're in the right place!

The icons are one of the frequently used items in a website no matter what it's about simply because they give your website a big boost in term of the overall design Moreover, giving you many many possibilities to customize, invent and be creative.

In this blog post, we're going to see an overview of the Font Awesome library Then, move on to a full guide showing you step by step how you can add the icons to your WordPress website in various places with different methods. Sounds interesting?

So, without more ado, Let's Get straight in to it!

Overview

In a minute, let's talk about Font Awesome library: what's it is? and Why would you use it in your website?

1 – What's Font Awesome?

The font awesome is one of the largest libraries containing over 1600+ Free icons by the time of writing this article and being used by millions of web developers and designers all over the world to create professional and clean-looking websites.

Font awesome has also a Paid version that you can purchase to get 7800+ more Pro icons as well as extend the number of styles provided for each icon and get some Pro assets and design kits.

font awesome icons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Why Use Font Awesome?

There are a lot of reasons why the majority of designers like the font awesome library and use it in every single design they create and the following are some of them:

It's FREE Open Source Library: I don't have to spend a penny if you want to start using it and the free version has actually more than enough for a beginner to start his career then upgrade later on in case you need the pro features in your projects.

Vector Icons: All the icons in the library are vector-based icons which means they are high quality to use in your designs and you won't have to worry about the icons get pixelated when you scale them. that's pretty much what a vector is.

Easy to customize: the font awesome icons are easy to use and customize because most of the graphic design software like Photoshop treats it like a font so you can adjust its colors, size just like a normal font.

If you're a web developer then let me tell you that the font awesome is also treated as a font so you can change its size, color, and all the other properties using CSS just like you would usually do when dealing with fonts.

Divi Font Awesome Icons (WordPress Guide)

When it comes to WordPress the Font Awesome library integration process is pretty easy and can be done in a lot of ways and we're going to learn how to add it manually then using a plugin as well as adding it to a child theme if you're using one which is recommended by the way.

so, you'll have all the possible ways and you can choose the easiest one and the one that is suitable for you.

Let's Do it !

1 – Manually Adding Font Awesome code to Divi Theme

So as to add Font Awesome library we'll be importing it using a CDN or what we call the content delivery network. it's basically a line of HTML code we add to the <head> section of our website and it makes all the icons available for us to use. that's pretty much it!

Here are the steps to follow to manually Add Font Awesome code to Divi Theme:

1 – The first step is to go to the Font Awesome official website Then click “Start for Free” button then complete the usual sign up process, verify your email, create a password for your account and you're ready to go.

font awesome website
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Scroll down then in copy the script shown below or click “Copy Kit Code” button next to it.

font awesome cdn
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Go back to your WordPress dashboard, in the very bottom left of the left-hand side menu hover over “Divi” then click “Theme options”

add font awesome divi
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Once you land on the Divi theme options panel do the following:

  • Click the “integration” tab from the top horizontal menu
  • Make sure the “Enable header code” option is enabled
  • Paste the script code you copied in the <head> section of your blog as shown below.

Then finally, on the top left corner just above the options panel click “Save Changes”

add font awesome to Divi theme
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

The font awesome icons are now added to your website.

2 – Adding Font Awesome to Divi using Plugin

If you're a beginner and you don't want to deal with anything related to code, then you've the second option which is to integrate it using the WordPress plugin provided by Font Awesome. Even though, it's not a good idea if you care about your website performance and you already have a lot of plugins installed.

Personally speaking, I always try to keep my plugins count to a minimum.

You can install their plugin like any other WordPress plugin by navigating to Plugins > Add New Or downloading it from the WordPress directory then upload and activate it.

font awesome plugin
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Adding Font Awesome To Divi Child Theme

The third option you can use to have font awesome installed on your Divi website is adding it manually by importing the same script code we have mentioned earlier to your Divi Child theme using a PHP function.

If you have been following my journey, you know that I always insist that you create and install a child theme on your website before you start doing any changes to avoid losing the modifications after updating your Divi Theme. Let's see how we can configure font awesome on a child theme.

To add Font Awesome to your Divi Child Theme follow these steps:

1 – Copy the following PHP script.

// Adding Fontawesome V5.0.6
add_action( 'wp_enqueue_scripts', 'tthq_add_custom_fa_css' );

function tthq_add_custom_fa_css() {
wp_enqueue_style( 'custom-fa', 'https://kit.fontawesome.com/e935fb0de6.js' );
}

2 – inside your WordPress dashboard, Go to Appearance > Theme editor, from the left hand side menu.

WordPress theme editor
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – A pop up will appear saying that implementing edits using the theme editor may break your site which is an important note you should always keep in mind and never do that have a backup of your site in place.

Now, in the theme files section on your right-hand side click functions.php, you'll see all the functions of the Divi theme all you have to do is to go on the top of the editor and paste in the snippet of code you just copied exactly as shown below.

Once, you do that, click “Update File” underneath the editor.

add font awesome to divi child theme
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Congratulations! you just installed the Font Awesome.

Divi Font Awesome Examples

Font Awesome icons can be used in different ways and places all across your website and we're going to give a few examples of what can you do with them using the Divi builder and from the usual WordPress dashboard.

1 – Use Font Awesome Icons in Divi Builder

As a person who is just starting out and doesn't have any coding experience, I think the Divi builder is the easiest way to use and customize the font awesome icons. therefore, we are going to start by playing around with the different Divi modules.

Add Font awesome to Divi Text module

The text module is probably one of the essential elements that are always used.

Here are the steps to follow to add Font Awesome To Divi Text module:

1 – Head over to Font Awesome icons page and filter by “Free” to see only the free ones in case you don't have premium access. Now, you see a list of 1600+ icons to use on your website.

font awesome icons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Choose the desired icon you want to add to the Divi text module. For the sake of this tutorial, I have chosen a happy face icon. Click on the code and it will be automatically be copied.

divi font awesome css
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Go to the Divi page builder and add in a row.

divi theme row
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Search for the text module and add it to your row.

divi theme text module
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – Make sure you click the “Text” tab, Then paste the icon code in the box. In the following example, I have made it in a heading tag to make it look bigger and you can notice it.

divi theme font awesome
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – As we have mentioned earlier in this guide, the vector icons provided by Font Awesome can be treated just like fonts so we're going to the “design” tab just like we would do usually when we try to customize a normal text. I have changed the color and the text font and as you can see below it's applied.

divi font awesome customizations
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

You can also play around with other customization like the background color, the border, and so on in order to reach the result you want.

Add Font Awesome to Divi Blurb

In the old version of the Divi theme, it was not possible to add an icon instead of the default blurb image except if you already have a little bit of knowledge about CSS to delete the image and add the icon using CSS pseudo-classes.

Long story short, it was hard and not dynamic at all.

But fortunately, as the Divi gets more and more updates they actually added it in the settings of the blurb so we won't have to go to the font awesome, we can select the icon we want directly from the settings as we are going to see in a while. which is Awesome!

Here are the steps to add Font Awesome to Divi blurb module:

1 – Open the Divi visual builder and add a blurb then go to the “content” tab and turn on the “Use icon” option so that you'll be able to add an icon instead of the image.

add icon to divi blurb
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Choose the icon you want from the list then use “Design” tab to customize it even more.

Divi blurb icon
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Add Font Awesome to Divi Buttons

The default Divi buttons have an icon that appears with you hover over it and same as the blurb, adding font icons is pretty easy since the options are built in the settings of each button.

Here are the steps to add Font Awesome to Divi Buttons:

1 – Inside the Divi visual builder, add a row, then search for the button module as add it as well.

Divi Buttons customizations
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – In the “design” tab, scroll down and select the icon you want to add to your button from the list provided. by default, the icon is hidden until you hover the mouse over the button but you can disable that option and add some padding to get the result seen below.

add icons to divi buttons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

All the methods we have seen until now are done inside the Divi builder, now let's see how we can add them in other places like in the menu and widgets. which is something you probably want to do at some point.

2 – Use Font Awesome In Divi Menu

To add the Font Awesome in Divi Menu You can follow the steps explained below:

1 – Go to font awesome again, choose an icon, you'll see its code. we only need what's inside the class, for instance, fas fa-crown.

font awesome icon
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Login in to your WordPress dashboard and from the left hand side menu go to Appearance > Menus

WordPress menus
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – On the top right corner click “screen options” and enable the “CSS Classes”.

enable css classes on menu wordpress
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Scroll down to the actual menu, open the menu item that you want to add the icon for, and paste the class in the CSS classes as seen below.

wordpress menus
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – If you open your site now you'll see an icon is being added to the menu item but it's not where we want it to be, the ideal place for it is next to the menu item name.

divi menu icons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – The cool part is that it's possible to customize the icon the way you want using CSS. for example, in the following example I have made the icon inside a <span> tag which an inline element which means the icon will now appear next to the menu item name.

Furthermore, I have added some basic CSS like changing the size and the color.

divi theme menu icons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

7 – By applying the same concept to all the icons and changing the color we get something amazing just like the one you see below.

add font awesome icons in divi menu
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Use Font Awesome in Divi Widgets

Another place you might need to have some font icons on is the sidebar or the footer and that's totally possible as well by adding widgets.

Here are the steps to use Font Awesome in Divi widgets:

1 – Go to Font Awesome official website, choose an icon and copy the HTML code

2 – Login to WordPress dashboard then from the left-hand side menu Hover over Appearance the click “widgets”

wordpress widgets
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – In the widgets section we have the ability to add the widgets to the sidebar and also the footer. For this tutorial, we are going to apply the process on the sidebar.

Since the code, we copy from the website is an HTML element we need to drag the “Custom HTML” widget from the available widgets then drop it in the sidebar area. Enter in a title and paste the icon code in the content box.

wordpress font awesome
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

4 – Now if you open a page in your website and look at the sidebar area you see our widget is added properly.

wordpress sidebar
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

5 – You can customize it even further by adding some HTML tags and styling them using CSS. in the example you see below I have changed the size of the icon making it a little bit bigger and set the color to blue.

WordPress custom HTML widget
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

6 – I saved the changes and they're applied to the icon as you can see. In this way, you can add more and more CSS codes to the icon and the widget title.

add divi widget sidebar
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

That's it for our Divi font Awesome guide for today.

Further Reading:

Roundup

Using stylish icons on your Divi website will help you improve the overall design and make it look more unique in fact, drawing a positive impression in the mind of every visitor that comes to your website or your client's websites.

One more thing I want to mention is that you always try to match the colors, size with your team and definitely make sure it's not in a place that disturbs the users because that way you'll be destroying another essential aspect of your website that is the user experience.

That's all for the Divi font awesome guide if you still have any question drop them in a comment below Otherwise, stay awesome!

Cheers!

0 Comments
Submit a Comment

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

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This