All Collections
FAQ's and Troubleshooting
Adding Divi Icons Anywhere You Want
Adding Divi Icons Anywhere You Want

Learn how to add Divi icons anywhere you want

Karen avatar
Written by Karen
Updated over a week ago

Important: Make sure the WP Dashboard / Divi / Performance / Dynamic Icons option is disabled. Otherwise, the changes below won't work.

Every Divi Icon has its own unique Code. For example, here is the code for the  social Youtube Square icon:    

You can find the complete list of the matched icons here: https://www.elegantthemes.com/blog/resources/elegant-icon-font (scroll down to the Complete Set and Unicode Reference Guide section). 

Note: You don't have to download and install the font if you are using Divi or Extra theme. The Elegant Icon Font is already integrated. 

All you have to do  is add the following code where you want in a text editor using the following format: 

<span class='et-pb-icon'>&#xe0d1;</span>


Here is a quick screencast:

Most of the styles of the icons can be modified under the design tab in the Divi Module settings. However, if you want to apply some unique styles only to one icon in the text you can add the styles inline. For example, to modify the text of the icon, please add this line instead:

<span class='et-pb-icon' style='font-size: 33px;'>&#xe0d1;</span>

You can add as many styles as you need inside the  style   tag separated by semicolon. Here is another example that changes the text size and the color:

<span class='et-pb-icon' style='font-size: 33px; color: red;'>&#xe0d1;</span>


You can find the full list of the available CSS Text Styles here:
https://www.w3schools.com/css/css_text.asp

Feel free to ask a question in the chat if it does not work for you 👍 

Did this answer your question?