How to add icons to the Divi blog and post meta

Apr 13, 2020 | Divi Resources

How to Add Icons to the Divi Blog and Post Meta?

In this blog post, we’ll walk you through on how to add custom icons into the post meta of the Divi Blog module and post layout. By default, there are no such things with the Divi Blog module and post layout. But using the Custom CSS provided in this post, we will add icons to the author’s name, date, and comments.

Now, let’s do the job.

Adding custom icons to the Divi blog post meta.

Adding custom icons to the Divi blog post meta
  1. Create a new post or edit an existing one.
  2. Deploy Divi Builder.
  3. Once Divi Builder has launched, go to its Page Settings.
  4. Then, go to the advanced tab, and in the Custom CSS settings, add the following custom CSS.
.author.vcard:before {
    padding-right: 5px;
    font-family: ETModules;
    content: '\e08a'; 
}
.published:before {
    padding-right: 5px;
    font-family: ETModules;
    content: '\e023';
}
.comments-number:before {
    padding-right: 5px;
    font-family: ETModules;
    content: '\77';
}

Custom CSS settings

5. Update, and preview changes.

Adding custom icons to the Divi Blog module for post meta

Adding custom icons to the Divi blog module for post meta
  1. Edit your blog page. Or create a new page if you haven’t created a blog page yet.
  2. Launch Divi Builder. (Skip this step and jump to step 6 if you have already created a blog page using the Divi blog module.)
  3. Build From Scratch.
  4. Choose, Build on the Front End.
  5. Once the page builder canvas has launched, add a new row. And then, add the Divi Blog module.
  6. Upon adding the module, go to Page Settings.
  7. Then, go to the advanced tab, and in the Custom CSS settings, add the above custom CSS.
  8. Save.
  9. You’ve successfully added the custom icons into the post meta of the Divi Blog module.

Summary

Above, we’ve shown you how you can easily add custom icons to your post meta for the Divi Blog module as well as post layout. If you want more customization for your blog module as well as post layouts, then get our premium products,

Divi Blog Extras

Divi Post Extended

Blogy – Divi Blog Layout Pack

Posted By:
Ankur Khurana
Ankur enjoys anything competitive. He is passionate about learning new things and traveling to new places.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why Do You Need a Blog and How to Improve It in Divi

Why Do You Need a Blog and How to Improve It in Divi

If you want your business to prosper, you need a blog.  Not only will it help you share valuable insights, but also provide guides & information about your products to prevent your customers from getting stranded.  However, you need to ensure the blog...

9 Best Promotion Bar/Counter Modules for Divi (2025)

9 Best Promotion Bar/Counter Modules for Divi (2025)

Are you here to look for a sleek yet attractive promotion counter for your business’s website? Fortunately, today, you’re going to explore one of the best promotion counter modules for your website. Usually, a regular visitor to your website spends between 52-54...

How to Create a Dynamic Filterable Portfolio in Divi

How to Create a Dynamic Filterable Portfolio in Divi

Facts reveal that 50% of marketers agree that visual content is a crucial factor for the marketing of your website or brand. So, if we consider this fact, a portfolio is a major element of the visual content. If you have a diverse range of projects to show on your...

Divi WooCommerce Extended