How To Show Icons Beside The Category Date And Author Meta Text In The Divi Blog Module Tutorial by Pee Aye Creative

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

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

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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!

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

  1. 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
  2. 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
  3. 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
  4. 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
  5. Serena Bosca

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

    Reply
  6. 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

Submit a Comment

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

Recent Posts

0

Your Cart