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.
Note: You don't have to download and install the font if you are using the Divi or Extra theme. The Elegant Icon Font is already integrated.
Add the Elegant Themes icons using the Icon module
In your page layout or Theme Builder layout, click on the Gray Plus icon
.Search for the Icon module.
Click on it to add it to your layout.
Use the Icon picker to select the desired icon.
Use the Design Tab to customize the icon's styles.
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>