All Collections
FAQ's and Troubleshooting
How To Add Icons To The Blog Module Elements
How To Add Icons To The Blog Module Elements

This article will guide you through the process of adding icons alongside category, date, and meta information within the Divi Blog module

Karen avatar
Written by Karen
Updated over a week ago

Adding icons to the Divi Blog module.

  1. Add the Divi Blog Module.

  2. Go to the Divi Blog module Settings tab.

  3. Navigate to the Advanced tab and locate the "CSS ID & Classes" section.

  4. In the CSS Classes field, enter: divi-bm-icons

  5. In your WordPress Dashboard, go to Divi > Theme Options, and select the General Settings tab.

  6. At the bottom, find the Custom CSS option and add the following CSS snippet:

    /*===styles for blog module meta icons===*/
    .divi-bm-icons .post-meta .published:before,
    .divi-bm-icons .post-meta .author a:before,
    .divi-bm-icons .post-meta>a:before {
    content: "\e023";
    font-family: ETMODULES;
    color: #0071fc;
    font-weight: bold;
    margin-right: 4px;

    /*===icon for blog module author meta===*/
    .divi-bm-icons .post-meta .author a:before {
    content: "\e08a";

    /*===icon for blog module category meta===*/
    .divi-bm-icons .post-meta>a:before {
    content: "\e078";

    /*===icon for blog module date meta text===*/
    .divi-bm-icons .post-meta .published:before {
    content: "\e023";

You can see the end result after applying the Custom CSS in the screenshot below:

Note: Feel free to modify the CSS Code in the Theme Options to adjust the color, size, and font-weight values.

Did this answer your question?