Add Custom Blurb Icons

Today we want to dive into one of the most beautiful and useful Divi modules, the Blurb Module. We all know how magical is create a blurb, is nice, clear and tuneful; and is able to communicate more than one hundred words.

A little handicap? The icons list is not so wide and often we have to use the same icons ever. So, working on a project i find myself needing some further icon to put on my homepage ‘Features’ section.

So there are few ways in order to customize our Divi Blurb Icons, from manipulate directly the source code ( maybe we’ll see this complex way in a future post ), to using a plugin like Divi Booster; but the easiest and quick way we have is simply by taking advantage of the magic of Css and a web service like Font Awesome.

So, let’s get started!

This is our final result!

If you’re asking yourself why can’t you use simply an image as blurb icon loading it directly from the blurb options the answer is simple: to use an image you have to create it before with the correct width and height and we have not the possibility to customize the circle icon, the border and so on.

So, simply follow these five easy steps.

STEP 1

First of all we have to create our Blurb Icon, we customize it and then simply add a custom Css class; in our case:

CSS Class: “custom-blurb-icon”

STEP 2

Next, we go to fontawesome.io and choose our icon. Simply copy the Unicode code.

STEP 3

Open Page Settings and go into Advanced -> Custom Css. Then add the following code.

/* Add in Page Settings - Custom CSS */

.custom-blurb-icon .et-pb-icon::after {
content: "\f1fd";
 font-family: "FontAwesome" !important;
 font-size: 48px !important;
}

STEP 4

Ok, we are almost there. Now go into Divi Theme Options -> Integration and add to the <head> of your blog the following line.

/* Add in Divi Theme Options - Integration */

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

Something wrong?

If you see something like the image aside i recommend you to check in Page Settings Custom Css that the Unicode code have the backslash! 😉

STEP 5

We have now only to customize the icon dimension with our css and duplicate as many blurbs we want changing only the icon unicode.

FINAL THOUGHTS

The effect is very nice and there are really hundreds of icons to choose from. It’s a really quick and easy way to make your website more unique and personal.

Hope you find this useful. See you next post!

7 Comments

Nick on December 5, 2017 at 12:02 am

Hi,

This is 90% of the way there for me however – when I do this both icons are showing. Did I miss something in the setup?

Dan Mardis on December 5, 2017 at 11:04 am

Hi Nick,
Sorry, i forget to write this important step… you have to go in Design options and set the Icon Font Size to 0px!
Thanks a lot for pointing out to me and let me know if it works fine now 😉
Reply

Cesar Garcia on August 10, 2018 at 6:12 pm

Thanks for sharing. I followed your guide and worked as expected until I wanted to use Font Awesome 5.2.0 icons. Specifically the “brain” which is “\f5dc” unicode.
I fixed it by properly calling the font-family like follows:

/*—- Custom FontAwesome Icons for Blurbs —-*/
.custom-blurb-icon .et-pb-icon::after {
content: “\f5dc”;
font-family: ‘Font Awesome 5 Free’ !important;
font-size: 100px !important;
}

I also replaced your step 4 with the following lines which are the Font Awesome CDN directly:

Dan Mardis on August 10, 2018 at 8:42 pm

Hi Cesar, thanks a lot for pointing out this FontAwesome update… your fix is the right one: just replacing the font-family with ‘Font Awesome 5 Free’ and update the CDN as referred at https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css.
We will cover in the next weeks an update of this post, for now thanks again 😉
Reply

Kay Kramer on August 16, 2018 at 2:58 pm

My icon is showing a square 🙁

Dan Mardis on August 30, 2018 at 6:57 pm

Hi Kay, have you updated both the font-family and the CDN?
Reply
Ben Gardiner on October 31, 2018 at 7:45 pm

So did mine.
If you’re copying Cesar’s code you’ll need to watch out for the inverted commas. Change
‘Font Awesome 5 Free’ to
“Font Awesome 5 Free”
Reply