Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
How to Add Elegant Themes Icons Anywhere on Your Website
How to Add Elegant Themes Icons Anywhere on Your Website

Learn how to use Divi’s built-in icons and place those icons anywhere on your website such as menus, and content areas.

Updated over 4 months ago

Integrating Elegant Themes icons throughout your website can enhance visual appeal, improve navigation, and highlight important information.

In this article, we will guide you through the process of adding Divi icons anywhere on your website.

Important note: Ensure that the Dynamic Icons option is disabled in the WordPress Dashboard → Divi → Performance Tab. Otherwise, the icons that are manually added will not display correctly.

Every Elegant Themes icon has its unique code.

Example: The Social Youtube Square icon has the following code:  .

You can find the complete list of each Icon's code in The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web article.

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.

Add Elegant Themes icons to a Text module

  1. Open the Text module's settings by clicking on the Gear icon

  2. Go to the Content tab > Text > Body Area

  3. Switch to Text Mode

  4. Add this HTML code where you want to display the icon

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


Style the Elegant Themes icon

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 size of the icon, use this HTML code:

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

Notes:

  • The style="" attribute is added in the above HTML code, which contains the CSS code for changing the font size to 33px.

  • You can add as many styles as you need inside the style tag, separated by a 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>
Did this answer your question?