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!

N

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.

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?
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!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!