How to Use Elegant Themes Icons Anywhere on Your Divi Site

The Divi theme comes with the Elegant Themes Icon Font which contains 360 cool icons. You can use these icons in the Divi Blurb module, but what if you want to use them somewhere else, like in a Text module or Code module, or sidebar?

Turns out it’s easy to do. First, find the icon you want to use in this Elegant Themes article and copy the code below it:

Next, paste the code inside the tags in this code (I’m using the mail icon in this example):

<a href="mailto:[email protected]" class="et-pb-icon" style="font-size: 30px;">&#xe010;</a>

Paste these onto your site wherever you want. Note, once the page is saved, the code will no longer show up in the text editor, just to warn you. But, the icon will be there on the front end and Visual Editor.

And of course, you can change the font size to whatever you want to adjust the size, and you can add CSS to change the color.

If it’s not working for you, try disabling Dynamic Icons in the Divi Theme Options -> Performance settings:

Let me know how this worked for you in the comments below. – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com