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. 

20% Discount!!!
Divi WordPress Theme

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!!! 🙂

    8 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

Post a Reply

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