How to Add Icons to Divi Blog Posts by Category

by Josh | 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:

Video
PDF
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:


/******* 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;
}

Here’s the look we just created: