Adding icons to the post meta in the Divi Blog module is one of the most excellent ways to add visual interest and make your blog posts meta-scannable. You can use icons to represent your blog posts’ category, date, author, and other post metadata. This can help your readers quickly identify all the information on the post meta.
This article will show you how to add icons to the post meta in the Divi Blog module without the help of any third-party plugins.
Steps to Add Icons to Post Meta in Divi Blog Module
Step 1: Add the Custom CSS
First, to add icons to the post meta, add custom CSS to the Divi theme. On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.
Copy the CSS snippet below and paste it into the Custom CSS field.
/*add icon to blog author meta text*/ .ap_post_meta_icons .post-meta .author a:before { content: "\e08a"; font-family: ETMODULES; color: #154aad; font-weight: bold; margin-right: 4px; } /*add icon to blog category meta text*/ .ap_post_meta_icons .post-meta>a:before { content: "\e078"; font-family: ETMODULES; color: #154aad; font-weight: bold; margin-right: 4px; } /*add icon to blog published date meta text*/ .ap_post_meta_icons .post-meta .published:before { content: "\e023"; font-family: ETMODULES; color: #154aad; font-weight: bold; margin-right: 4px; }
The Code Explanation:
This CSS code adds icons to different parts of a blog’s meta information, such as the author’s name, category, and published date, by adding icons from a custom font (“ETMODULES
“) before the text. ETMODULES is Divi’s built-in icons collection that uses specific unicode characters to represent these icons and applies to styles like color and font weight to make them stand out.
Click here to learn more about Divi’s built-in icons collection and how to insert the unicode into the CSS snippet.
Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.
Step 2: Add the Unique CSS Class Name
Alright, now we move on to the next step. It’s time to add the unique CSS class name to the Blog module you want to add icons to post meta.
Go to the Divi Builder, add a new Blog module, or select the existing one.
On the module settings, go to Advanced tab -> CSS ID & Classes. Afterward, add a unique CSS class name to the CSS Class input field.
Note: The unique CSS class name you add must be the same as the CSS class name you’ve added in the Custom CSS. In this example, we enter “ap_post_meta_icons“.
That’s it. Once you add the CSS class name to the Blog module, the icons appear on the blog’s meta information before the text. Feel free to modify your icon appearances by editing the property values in the CSS snippet, such as the color
, font-weight
, and margin-right
. Last but not least, don’t forget to save or publish your project if you want to.
The Bottom Line
By following the steps outlined in this article, you can easily add icons to the category, date, and author metadata. This will help improve your blog’s overall look and feel and make your visitors more likely to click on your posts.
Here are some additional tips for adding icons to post meta in the Divi Blog module:
- Choose a consistent style for your icons. This will help to create a cohesive look and feel for your blog.
- Don’t overdo it. Too many icons can be overwhelming and distracting. A few well-placed icons can be enough to make a big difference.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access any website you create.