Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Show Icons Beside The Category, Date, And Author Meta Text In The Divi Blog Module

Nelson Miller Profile Orange
In this tutorial I will show you how to show icons beside the category, date and author meta text in the Divi blog module.

▶️ 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.

add a css class to the Divi Blog module to add icons to the meta text

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!

Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

Comments By Others

  1. Clara

    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

    Reply
  2. Serena Bosca

    There is the way to set the author avatar instead the icon?
    thankyou

    Reply
  3. Rupali

    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.

    Reply
  4. Bill Horvath

    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.

    Reply
  5. Debra Elliott

    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?

    Reply
  6. Adriane

    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

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart