How To Replace The Divi Blurb Icon With A Font Awesome Icon Tutorial by Pee Aye Creative

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

In this tutorial you will learn how to replace the Divi Blurb module icon with any Font Awesome icon of your choosing!

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 Blurb Module

Now go to the desired Divi Blurb 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 code snippet. In our snippet, we have used the class “pa-blurb-icon” and so this same class needs to be add here.

We give this custom class to make sure that our custom code will not affect the element that we don’t want to change.

Enable Use Icon And Choose Any Icon

By default, the Divi Blurb module is set to use an image. So first, go to the Image and Icon toggle in the Content tab and click on the “Use Icon” toggle. 

Next, because of how this method works, we need to actually assign an icon to the Divi Blurb module before we can replace it. For this step, simply choose any random icon. The key is to actually click on one, because by default there is not any selected.

use Font Awesome icon in Divi Blurb module

Use JQuery To Remove Existing Icon And Replace With New

The next step is to remove the icon that is currently used in the Divi Blurb module and replace it with one from Font Awesome. You may think this should be possible with just CSS, but unfortunately because of the way the icon is structured it is not. So we must use the jQuery snippet below to achieve this.

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.

<script>
jQuery(document).ready(function(){
    jQuery(".pa-blurb-icon .et-pb-icon").remove();
    jQuery(".pa-blurb-icon .et_pb_image_wrap").prepend("<span><i class='fas fa-bacon'></i></span>")
})
</script>

What Is Happening Here?

The remove() line in the code is removing the existing default icon of the blurb module. After that, we are prepending or placing our Font Awesome icon in the same div where the default icon used to be located.

Change The Icon

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.

choosing the icon code on Font Awesome.png

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. 

Repeat This Process For Each Blurb

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.

Style The Icons

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:

.pa-blurb-icon .et_pb_image_wrap { 
color: #ffffff;
  background: #000000;
  padding: 20px;
  border-radius: 10px;
  font-size: 48px;
}

Be sure to watch the video to see this all in action and to see how simple this solution is! We use it on our sites and couldn’t be happier. Let me know in the comments if you enjoyed this!

15
Last updated May 28, 2021 @ 12:45 am

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

2 Comments

  1. Nora

    Thanks! I’ve been looking for this! What can you do if you want to style the icon on hover?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Nora,
      I’m so glad you like it! I’m not sure what you want example, but you can always add :hover to your button class and add the styling that you desire.

      Reply

Submit a Comment

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

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart