NOTE: This tutorial is depreciated and no longer needed due to a Divi update.

Our blood, sweat, and tears helped many of you. But ultimately updates like this are progress in the right direction for Divi!

How To Replace The Divi Button Icon With A Font Awesome Icon

In this tutorial I will show you how to replace the default Divi Button module icons with Font Awesome icons!

Categories: Depreciated Divi Button Tutorials

Adding Fun new Button Icons

The only icons that are available in the Divi Button module are those provided by Divi known as ETModules font family is very limited. These are fine, but also pretty limited and it would be great to be able to use other icons. In this tutorial, I am going to show you how to replace the Divi Button module icon with a Font Awesome icon!

Be sure to watch the video to see this all in action and better understand how it works. Let me know in the comments if you enjoyed this!

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

Subscribe On YouTube

Connect Font Awesome To Divi

Since this guide is all about replacing the standard icon with a Font Awesome icon, the first step would be to ensure that you have Font Awesome connected to your Divi website.

We have a dedicated guide about How To add Font Awesome Icons To Divi. Once you have that connected you can proceed to the other steps.

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

Add A Custom CSS Class To The Button Module

Now go to the desired Divi Button module and open settings. Go to the Advanced tab and open the CSS ID & Classes toggle. There you can write your custom class.

It is necessary for this class to match the one used in the jQuery code snippet, which you will find later on in this tutorial. For our examples, we made one button module with the class “pa-button-icon-right” and another button module with the class “pa-button-icon-left” which allows us to target them properly. We use custom classes to make sure that our custom code will not affect the element that we don’t want to change.

Turn Off The Default Button Icon

By default, the Divi Button module has an icon that is turned on by default when you hover over the module. Since we do not want the default icon, we need to first turn off the icon. To do this, go to the Button module settings to the Design tab to the Button toggle and turn on “Use Custom Styles For Button.” Scroll down there and look for the “Show Button Icon” setting and turn it off.

Use jQuery To Add A Font Awesome Icon

The next step is to add the icon of your choice from Font Awesome. You can choose the actual icon in the next step, but first, we need to use a jQuery snippet with an example icon included to get you started.

Notice there are two similar but different snippets. One adds the icon to the right, the other adds the icon to the left. It’s your choice, just choose one and make sure to match the CSS class in the module from the previous step.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

Add JQuery For Font Awesome Icon On The Right

<script>
jQuery(document).ready(function () {
 
    jQuery(".pa-button-icon-right").append("<span><i class='fas fa-bacon'></i></span>");
})
</script>

Add JQuery For Font Awesome Icon On The Left

<script>
jQuery(document).ready(function () {
 
    jQuery(".pa-button-icon-left").prepend("<span><i class='fas fa-bacon'></i></span>");
})
</script>

Choose Your Font Awesome Icon

Now you can choose your own icon from the thousands of them that are available on the Font Awesome website. The only part of this snippet that you should change is between the <span> tag. Notice in this example the icon code copied from Font Awesome is <i class=’fas fa-bacon’></i>.

Where To Find The Icon Code?

To find this code, go to the Font Awesome website and find the icon that you want to use. From there you will see the HTML code and you can just click to copy it.

So just place that between the <span> tags and you are all done!

NOTE: I ran into a weird issue where the double quote symbols (“) were not working, I had to change them to single quote apostrophe symbols (‘). Not sure if that was just me or what, but try that if you have trouble with it.

Add Spacing And Style The Icons

At this point the icons are smack up against the button text, and that’s not cool. So now we just need to add one of CSS to move them over. Notice how each snippet below corresponds to whichever CSS class you were using so far, either left or right, so choose the one that matches.

Now of course you probably want to make the icons look good. Since we are not using the default icons, we can’t just use the design settings in the module. You will need to sue CSS for this. You can target the icon like this example:

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Add CSS For Font Awesome Icon On The Right

/*position and style Font Awesome icon on the right*/

.pa-button-icon-right span {
    margin-left: 14px;
    /*your styles here*/
}

Add CSS For Font Awesome Icon On The Left

/*position and style Font Awesome icon on the right*/

.pa-button-icon-left span {
    margin-right: 14px;
    /*your styles here*/
}

Repeat This Process For Each Button

If you want to do this for more than one blurb, no problem! You will just repeat some of the steps for each one. Make sure to assign a different unique class to each blurb module, and them make sure you update that class in the duplicate jQuery snippet.

Hover Option

There is unfortunately no good way to make a nice smooth hover option when using this method. However, I will give you an example of how this can work. It works fine, it is just not a smooth transition because you can’t add transition effects to the display attribute.

In these snippets you can see that I first hide the icon, then when hovering over the button the are shown. You can play around with these as you want. I’ll also show these in action in the video, so be sure to watch that.

Hover For Icon On Right

.pa-button-icon-right span {
	margin-left: 14px;
	display: none;
}

.pa-button-icon-right:hover span {
	display: inline-block;
}

Hover For Icon On Left

.pa-button-icon-left span {
	margin-right: 14px;
	display: none;
}

.pa-button-icon-left:hover span {
	display: inline-block;
}

Last updated Nov 4, 2021 @ 6:21 pm

That's it!

I hope you have enjoyed learning How To Replace The Divi Button Icon With A Font Awesome Icon. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe for more stuff like this.

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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.