How to replace the blurb icon with Font Awesome

Last week I received a help request from John. He was trying to replace the blurb icon from it’s original Elegant Font to a Font Awesome icon. He did some pre-work, so half the credits go to him. Only some tricky finishing touches were needed.

I thought that other Divi users would be interested in this, so here it comes. Click to see how you can do it yourself. It requires adding some CSS to your style sheet and maybe playing around with it a bit for proper adjusments.

First, of course, you need to have Font Awesome loaded. You can easily do that with the Font Awesome for Divi Builder plugin, which you can grab here. Then follow the steps below.

!

1. Set up a blurb

Just set up a blurb with any icon. We’ll replace the icon later with some CSS.

If you want a circle or circle border, set those up the way you want it.

Give the blurb a custom CSS class name. (Open your Blurb Settings, go to the Custom CSS tab, and add the class name in the CSS Class field.) It should be different that the Font Awesome class names, e.g. don’t use fa-plane. But you can use fab-plane.

Q

2. Hide the icon

In the Blurb Module Settings panel go to Advanced Design Settings.

Switch on ‘Use Icon Font Size’ and set it to 0.

fab-blurb-settings

Now you will need to edit your style.css file, so go to Appearance > Editor. It should automatically load your styles.css

Add these lines to it, with your settings. Read the notes below.

.fab-plane .et-pb-icon::after {
    content: "\f072";
    font-family: "FontAwesome" !important;
    font-size: 48px;
    padding: 6px; /* OPTIONAL, READ NOTES */
}

 

i

Notes

The .fab-plane should be the css class name you gave your blurb.

The content should be the unicode from the Font Awesome page, e.g. “\f002” for the magnifying glass in the example. Don’t forget the quotation marks and the backslash!

You will most probably need to adjust the font-size of the icon. An out-of-the-box Divi uses 48px for the icon on top and 16px for the icon on the left. You can of course use different values if you want to.

The padding is optional. Some icons are not square, for example the plane icon. In these cases the circle around the icon will be an oval. This can be fixed by setting a padding of a couple of pixels. If you don’t need any padding, then just remove the line.

If you did the above 4 steps, then you should have your blurb ready with a Font Awesome icon.

If you have more blurbs, then you need to do this for every one of them. Or do you? 🙂

In my next post I will be giving you some tips on how to minimize / simplify the CSS code if you are using more blurbs with Font Awesome. If you want to be ready for that, then give all your Blurbs an extra CSS class name called ‘fab’. 😉

If you have questions or you need some help, feel free to leave a comment, maybe it will help somebody else too.

Happy Blurbing!

Out of Office

The chief editor of Divi Magazine – me 🙂 – got caught up in family life. 🙂 My second daughter was born early this summer and if you have kids, you know what that means. 🙂 In case you don’t have kids, I strongly recommend having at least 1! Better 2 or 3! It beats everything.

Soon – in a week or two – my head will be out of the water and Divi Magazine will get back on track. There are still plenty of tricks and tips in my bag.

Since its launch in April, Font Awesome for Divi became pretty popular, and as the top “selling” item it has been downloaded 150+ times already, and the numbers are growing by the day. Maybe I should start charging money for it. 🙂 (Yeah, I know, 150 is a small number, but take into account that it is not posted in the WordPress Plugins repo.)

BUT! Font Awesome for Divi is going to get a free update!!! That is going to be my next post, hopefully within 2 weeks, so keep your eyes peeled.

css.php