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>Custom CSS code box.
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!
Hi, congratulations on your fantastic work! I have a question. If the same article belongs to two categories, is it possible to create two different icons to show for the two categories? Thank you
You could possibly do this with CSS by first targeting the category, then add the icon, but that is beyond the scope of this tutorial.
There is the way to set the author avatar instead the icon?
thankyou
I am not aware of any way to do that at this time, sorry.
Sir comment Icon not getting set on meta I tried a lot plz guide has link for example https://rojgarsangam.in/topic/
It is showing on your site
Hello, Thanks for all these great tutorials.
Is it possible to do the same with the author image instead of the icon ?
Thanks for help.
That would take additional programming.
I also have this question if you’d be willing to make a tutorial!
Thanks Nelson! Sort of related: Do you know how to put a shortcode behind the last bit of metadata? I’m trying to add shortcode from a plugin to the metadata.
Hi Bill,
Hmm I don’t know how to do that, sorry!
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/
I tried to do it in an extra divi blog module and put the class you mention, the result is that I get double icons
I’m not sure what an extra divi blog module is?