Add Meta Text Icons To The Divi Blog Module
We have tons of tutorials in our Divi Blog module series, but I realized we can do even more. This one is a nice way to spruce up the blog grid a little. In this tutorial, I will show you how to add icons beside the meta text in the Divi blog module. We will be using a simple CSS snippet for each icon, and it is really easy to follow along with the video and written instructions, so let’s go!
▶️ Please watch the video above to get all the exciting details! 👆
1. Add A Custom CSS Class To The Divi Blog Module
The first step is to add a custom CSS class to the Divi Blog module. Using a custom class like this will make sure that our code only affects the module with this class, rather than affecting other Blog modules on your site.
Open the Divi Blog module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-blog-meta-icons” into the CSS Class input field, as shown in the screenshot.
2. Add The Custom CSS Code Snippets To Your Website
Where To Add The Code Snippets
Now that you have added the custom CSS class to the module, you can proceed and choose one or more of the snippets below. Each one is labeled, and you can use either one, two, or all three of them.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>General tab in the "Custom CSS" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Author Icon
/*add icon to blog author meta text*/
.pa-blog-meta-icons .post-meta .author a:before {
content: "\e08a";
font-family: ETMODULES;
color: #0071fc;
font-weight: bold;
margin-right: 4px;
}Category Icon
/*add icon to blog category meta text*/
.pa-blog-meta-icons .post-meta>a:before {
content: "\e078";
font-family: ETMODULES;
color: #0071fc;
font-weight: bold;
margin-right: 4px;
}Date Icon
/*add icon to blog published date meta text*/
.pa-blog-meta-icons .post-meta .published:before {
content: "\e023";
font-family: ETMODULES;
color: #0071fc;
font-weight: bold;
margin-right: 4px;
}Feel free to choose different icons if you want, change the color, or anything else!
I have a basic child theme for Divi. The Blog Module puts the word, “by” in front of the Author name in the meta data. I want to reorder author to be after date and I figured out how to do that based on your tutorials, but the word “by” does not move with the author meta data item. How do I get rid of the “by” word?
You can check out this tutorial: https://www.peeayecreative.com/how-to-remove-the-divi-blog-module-meta-separators/