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:

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