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
Open the Text module's settings by clicking on the Gear icon
Go to the Content tab > Text > Body Area
Switch to Text Mode
Add this HTML code where you want to display the icon
<span class='et-pb-icon'></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;'></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;'></span>