Solving A Common Issue
As we all know, the icons that are available in the Divi Blurb module are very limited. Sure, we can add an image or upload our own SVG or PNG icons, but still it would be very nice to be able to use other icons. So as usual every week, we have a solution to a common issue! In this tutorial, I am going to show you how to replace the Divi Blurb module icon with a Font Awesome icon!
▶️ Please watch the video above to get all the exciting details! 👆
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.
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.
3. 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.
4. 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.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<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.
So just place that between the <span> tags and you are all done!
6. 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.
7. 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:
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
.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!
It doesn’t seem to be working anymore. I know Divi has font awesome built in already but Divi is missing a lot of font awesome icons. They only have a very limited icons. I wanted to use this one https://fontawesome.com/icons/house?s=regular&f=classic
Yes as noted this is depreciated.
Nelson, thanks for your great videos… and please help.
I can’t get this to work and I know it must be something I’m doing or not doing… the page is live to view if you want to look at it… stage dot 4z1 dot co dot uk.
Thanks
Hi Lee,
Could you please tell me what is the issue that you are facing while following the steps mentioned in the guide?
Hi. Is it possible to add the head code to a single page instead of global in theme options?
Hi Ross,
Yes, it is possible. Please try adding a code module on a page where you want the code to be implemented and then add the code in the module.
Let me know how it goes. 🙂
apologies… had a blonde moment!! all good 😊
Nifty way to substitute icons. I just added the jquery to a code box below each blurb I was using (I did change the class name, just to avoid “code confusion”.) I would note that if the script is added to individual code boxes, users won’t see the change until they exit the visual builder. Thanks for your great tips!!
You’re welcome! Yes any JS won’t show in the Visual Builder.
Thanks!
You are welcome!
Another good article would be to create a backstretch background to doesn’t move in divi. like here: https://essexcu.org/rates-fees/loan-rates/
Hi Timothy,
Thank you for the suggestion and we will definitely look into it. 🙂
Thanks! I’ve been looking for this! What can you do if you want to style the icon on hover?
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.