Using the Divi font icons anywhere

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

Divi comes with a free set of very useful icons installed as a font set. The icons are built into the Page Builder Blurb module, where you can add a circle border and background color. But these icons can be placed anywhere on your website. They’re already installed in your theme, so you might as well get good use out of them!

In this tweak I’ll show you how to display the icons anywhere on your website using CSS. I’ll also show you how to change the color, size, background color and add a circle border, and hover effects.

The first thing you’ll want to do is head over to Elegant Theme’s website where you can view the complete icon set for Divi. You don’t need to download the icons. They’re already in your Divi theme. Scroll down past the icons and download button and you’ll see the Unicode Reference Guide. This is the code we’ll reference for the icons you want to use.

To include the icons in your site, you’ll need to figure out where you want to add them. For my example, I’m going to use the bullet list in the WordPress Recent Posts sidebar widget. If you right click on one of your posts in this list and select ‘Inspect Element’ from Chrome or Firefox, you’ll see the HTML for that widget and post list. In my case, the widget ID is “recent-posts-2”. Now I’ll add the icons to each post using a pseudo class. This is what it looks like:

Screen Shot 2015-05-13 at 11.09.27 PM

And here’s the CSS I used to pull it off:

This is how it works, and it’s really easy to replicate. A pseudo class basically creates a fake HTML element using CSS. So instead of editing the widget plugin to include icons, we can add them easily using CSS.

A pseudo class always has content and position set or it won’t display. Even if the content is empty, you still have to include the double quotations. In our case, we’re inserting the code required to display the icon. So where did I come up with “\5a”? It’s in the Divi reference guide I linked to earlier. If you look at the page and look at the icon I used, you’ll notice the unicode is Z but we can’t use that. We need to remove some characters for it to work and there is an easy formula you can use to do just that.

Anything before and including the x gets removed. Then just remove the semicolon and what’s left is what you’ll use. Now all you need to do is preceed it with a backslash, wrap it in double quotes, and add the closing CSS semicolon. The end result is “\5a”; for this particular icon.

The last thing you need to do is include the font-family: ‘ETmodules’. These icons are font icons and without the font-family, it won’t work.

So what else can we do with these guys? Lots of things! Change the color by adding a color style:

Increase the size of the icon:

Add a circle border:

You may have to play around with the padding and border-radius depending on the size of your icon.

If you want to add hover effects, just add the :hover directly after the element and then tack on the :before pseudo class:

That’s all there is to it. You now have the ability to place over 300 icons anywhere on your website. You could even create your own classes like .chain-link to any element like certain links:

Then add the CSS to your stylesheet:

Now all links with class chain-link will have a link icon in front of them. If you find you need to adjust the position of the icon, just use something similar to this:

It’s not the most exciting tweak in the world, but it’s the little things that add up to make a website look fully developed. With that said, use them sparingly!!! 🙂

    16 Comments

  1. Thanks, exactly what I was looking for!

    L

    June 30, 2015

  2. That “stand out” thing in the sidebar is really cool. Never seen that before.

    Best wishes from Cologne / Germany
    Atilla

    Atilla Boz

    February 28, 2016

  3. I noticed a few of the icons wont work for some reason, for example the chat icon that would ordinarily be “\77” didn’t work. To use the chat icon you can use the solid icon which is “\e066”, hope this helps someone else like myself looking all over for a working code.

    Thanks for the article!

    Lakewood

    May 18, 2016

  4. Thank you. Very simple but excellent explanation on how to use font icons.

    A very good use for these fonts are for displaying menu links in mobile view. If one were to use these fonts as links for replacing menu items such as “HOME”, “CALL” etc., then the menu text following the font icon needs to be hidden.

    How do go about achieving that? Thank you.

    Susila

    June 30, 2016

  5. Great tip! I didn’t even think about using those elsewhere..

    Harper

    August 14, 2016

  6. i’m a bit of a novice and I just want to use them as bullets but I can’t work out what the #recent_posts_2 should be changed to. Can you help?

    AJ

    January 17, 2017

    • Hi AJ. You’ll just want to replace #recent_posts_2 with the ID or Class of the list you want to change.

      Brad (admin)

      March 20, 2017

  7. I did this and it shows the original bullets in front of the new icon

    Paul

    January 30, 2017

  8. Trying to use this with a Portfolio displaying a list of projects on a site listing availabe properties for a home builder.

    Added the CSS and changed the Class in the module but the text doesn’t appear. Anything else I can try?

    Marv D

    June 14, 2017

  9. Using the recommended unicode in my top menu I get only a small square, not the facebook icon. I am on the Edublog system and the plugin is not available. Thoughts?

    JOHN

    September 28, 2017

  10. Great article. Helped with grouping same icons together when I was doing ‘Areas covered’ on a contact page and also individual list links (when I eventually worked out what I was doing wrong!). I thought I would be able to just copy what I had used for the same section icon but I needed to add the a beforehand to use before the link.

    Anyway, I couldn’t have done it without you!

    Deborah

    November 15, 2017

  11. Thanks for the helpful guide.

    “Anything before and including the x gets removed” – this was the part I couldn’t figure out.

    Chuck

    December 28, 2017

  12. Hey,

    I’m trying to use icons before my contact information but it doesn’t work. Can’t figure out, what I#m doing wrong.

    The css ID of the text modules are contact_adress, contact_phone and contact_mail. I used the following code:

    #contact_adress li:before {content: “\46”; position:relative; font-family: ‘ETmodules’; color: #ffffff;}
    #contact_phone li:before {content: “\e090”; position:relative; font-family: ‘ETmodules’; color: #ffffff;}
    #contact_mail li:before {content: “\e010”; position:relative; font-family: ‘ETmodules’; color: #ffffff;}

    I tried it in the custom css of the site and the page but none of it worked. What am I doing wrong?

    Sebastian

    February 22, 2018

  13. Hi! I am trying to achieve this, but they give us the Unicode html code, not the Unicode number. So I don’t know which one is the one I want… XD

    Do you have any idea?

    Taisa

    February 17, 2020

Post a Reply

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

Pin It on Pinterest

Share This