Using the Divi Font Icons Anywhere

Divi comes with a free set of very useful icons installed as a font set.The icons are available in many of the Divi Modules including a dedicated Icon module. But these icons can be placed anywhere on your website without using a module. They’re already installed in your theme, so you might as well get good use out of them!

In this tutorial, we’ll show you two methods for adding the Divi icons anywhere on your site – an HTML method and a CSS method. We’ve also included the complete Divi icon set along with their corresponding HTML and CSS codes that you can simply copy and paste:

• Divi Icons – Grid
• Divi Icons – Searchable Table

* Before we get started, it’s important to note that you may need to disable Dynamic Icons in the Divi -> Theme Options -> Performance tab. In many cases, the icons will already be loaded on the page even with this option enabled if you have icons in your header, footer, sidebar, etc. If not, disable the option to force load them on every page.

Add Divi Icons using HTML

To insert a Divi icon using HTML, you’ll need to add a span with class et-pb-icon. In between the openening and closing span tags you’ll place the icon’s HTML code. You can copy and paste that code from the HTML section directly below the icon you want to use in the grid below.

Here’s an example of what the HTML would look like for the checkmark circle icon:

Add Divi Icons using CSS

In some cases you may not want or be able to insert a span tag into the HTML. For example, maybe you want to add an icon before or after an existing element. You can do this using CSS and a pseudo :before or :after element.

In the example below we are adding the same checkmark circle icon from the previous HTML example. Only this time we are using CSS and the :before pseudo element to add it in front of an existing unorderd list item element.

In place of using the icon’s HTML code, we’ll use the icon’s CSS code as the content value in the CSS. You can copy and paste that code from the CSS section directly below the icon you want to use in the grid below.

You can add the CSS above to the Page CSS using the Visual Builder, your child theme’s stylesheet, or in the Custom CSS section at the bottom of the the Divi -> Theme Options page.

Divi Icons – Grid

back to the top !

Divi Icons – Searchable Table