Enhancing the visual appeal of your content can significantly improve user engagement on your website.
One effective way to achieve this is by adding custom icons to the Blurb Module's body text in Divi. Custom icons can highlight important information, making your content more attractive and easier to read.
This article will guide you through the steps to add custom icons to the Blurb Module's body text.
Open the Blurb's module settings by clicking on the Gear icon
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS code:
selector .et_pb_blurb_container:after {
font-family: ETModules;
content: "\24";
font-size: 36px;
color: red;
position: absolute;
bottom: 0;
right: 10px;
transition: .3s;
}
selector:hover .et_pb_blurb_container:after {
right: 0;
}
Note: You can change the icon's color by changing the color property value.
The result can be seen in the screenshot below:
