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

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.

If you are using our free Divi child theme, place the snippet(s) into the style.css file. Otherwise, place them in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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!

21

Last updated Apr 26, 2022 @ 1:05 am

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 :)

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

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart