The Divi Blurb module allows to display both Images and Icons but does not include Numbers.
We show you this handy trick that will allow you to choose certain Icons that will actually show Numbers.
Divi Blurb uses the “ETmodules” font-family to display Icons so we can change the font-family via CSS and then the Icons selected from the module will display Numbers instead.
Then we only have to choose the Icons equivalent to the desired Numbers!
Replacing Icons by Numbers
Paste this into Blurb → Advanced → CSS Class:
num-blurb
By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.
Paste this into Page Settings → Advanced → Custom CSS:
.num-blurb.et_pb_blurb .et-pb-icon {
font-family: "Poppins"!important;
}
.num-blurb .et_pb_main_blurb_image {
text-align: center!important;
}
Replacing Icons by Numbers inside a Circle
Paste this into Blurb → Advanced → CSS Class:
num-blurb
By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.
Paste this into Page Settings → Advanced → Custom CSS:
.num-blurb.et_pb_blurb .et-pb-icon {
font-family: "Poppins"!important;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
How to find font-family names for CSS
In this example we are using the “Poppins” font. If you want to use a different font, just define a different font-family to your liking.
Learn to find out the name of a font-family:
🥳 That’s it!