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';
}


5. Update, and preview changes.

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

Grace-Divi Post Layout Pack

Divi Post Extended

Blogy – Divi Blog Layout Pack

Posted By:
Marshall
Marshall is creative head at Elicus and works with the team to bring ideas to life. He is strongly focused on delivering a quality experience to clients and customers.

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.

Build Divi Shop Amazingly With Divi Cart Pro in 2021 & Beyond

Build Divi Shop Amazingly With Divi Cart Pro in 2021 & Beyond

Building a Divi shop is amazing when you’ve got the right tool. And you don’t have to put extra work to make everything right for your customers as well as you —  the owner. You can use the Divi and WooCommerce to lay out the structure for your Divi store, but...

Fix WordPress Site Stuck in Maintenance Mode (3 Easy Ways)

Fix WordPress Site Stuck in Maintenance Mode (3 Easy Ways)

Is your WordPress site stuck in maintenance mode, and you aren’t able to find any way out? Then, in this tutorial, we’ll look into the issue and help you unstuck your website from maintenance mode. There will be no heavy lifting or anything hardcode related that might...

7 Tips & a Complete Guide to Design Perfect Website Header

7 Tips & a Complete Guide to Design Perfect Website Header

From recognizing a brand to navigate the website with ease, a visitor’s journey starts from the website header. And it continues up to an indefinite time whenever he visits the site -- to either explore, get the services, or read the blog and whatnot. The header of a...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts