How to Add Icons to Divi Blog Posts by Category

by | Jun 26, 2019 | Divi Tutorial | 0 comments

In this tutorial, I’ll show you How to Add Icons to Divi Blog Posts by Category. It’s a super cool way to add some life to blog posts that would otherwise look very boring. Especially when you have posts without a featured image.

By the end of this tutorial, you’ll see how to add a custom icon to ANY post category you create. In the tutorial I show you how to create 3 different category icons but there’s no limit to the number you want to create. We are going to be using a little CSS to achieve this look so be sure not to miss out on my current promo code below for access to my Divi/CSS Course.

Let’s get into it!

In short (and most importantly), you can create these icons per post category by adding a class of .category-[CATEGORY TITLE HERE]

You can then use that prefix to target the whole post, the title, or in this case, a pseudo class.

First, make sure you create your category(s) and add it to your post. In this example, we have 3 categories:

  1. Video
  2. PDF
  3. Text

The CSS code below will customize the icons for any post labeled with those categories!

Here’s the CSS I showed in the video:
[css]

/******* Custom Icons on Divi Blog Posts ********/

.et_pb_blog_grid .et_pb_post {
border: 0px solid #d8d8d8;
}

.category-pdf:before {
color: #73c32e;
content: "\e059";
font-size: 24px;
font-family: ‘ETmodules’;
position: absolute;
margin-left: -35px;
margin-top: -5px;
}

.category-video:before {
color: #73c32e;
content: "\e04e";
font-size: 24px;
font-family: ‘ETmodules’;
position: absolute;
margin-left: -35px;
margin-top: -5px;
}

.category-text:before {
color: #73c32e;
content: "\e05a";
font-size: 24px;
font-family: ‘ETmodules’;
position: absolute;
margin-left: -35px;
margin-top: -5px;
}
[/css]

Here’s the look we just created:

Be sure to place this in the Divi Custom CSS area or ideally Child Theme Stylesheet. See tutorial below for more info on that.

Hope this tutorial helps and again, just use the code above as reference for customizing your sites!

Like this tutorial? You’ll love my CSS Course.

Use coupon code “CSS30” for $30 OFF at checkout!