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!
So, simply follow these five easy steps.
CSS Class: “custom-blurb-icon”

STEP 3
Open Page Settings and go into Advanced -> Custom Css. Then add the following code.
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.
Something wrong?

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!
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?
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 😉
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:
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 😉
My icon is showing a square 🙁
Hi Kay, have you updated both the font-family and the CDN?
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”