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:
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;'></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;'></span>
You can find the full list of the available CSS Text Styles here:
Feel free to ask a question in the chat if it does not work for you 👍