I have used font awesome quite a bit in several projects (like in menus), but the more I have gotten into speed optimization and security, the more I want to keep plugins out of the way.

Plus Divi has a native icon font set.

Hello.

Take this video as an example.

I have also noticed virtually every wordpress template on the market uses icons in contact forms, because, well, who doesn’t like a simple little email icon next to an email address.

All that to say, I created a simple html block and some css that I know use on virtually every site I develop.

Here is the video on how I use it and the code, as usual, is posted below:

Here it is:

<h2>Contact Information</h2> 
<div class="contact-address contact-media">123 Your Address, San Antonio, Texas 78212</div> 
<div class="contact-phone contact-media">(210) 555-5555</div> 
<div class="contact-fax contact-media">(210) 999-9999</div> 
<div class="contact-email contact-media">logan@orangepulleyllc.com</div>

And the CSS used:

.contact-media:before {
 position: relative;
 margin-right: 4px;
 font-family: 'ETmodules';
}
.contact-address:before {
 content: "\e009";
}
.contact-media {
 margin-bottom: 2px;
}
.contact-phone:before {
 content: "\e090";
}
.contact-email:before {
 content: "\e010";
}
.contact-fax:before {
 content: "\e103";
}

And a useful site for finding all the content codes:

Divi.Space

https://divi.space/using-the-etmodules-icon-font/

You can find more stuff on this blog site or my all in one Divi style sheet site hosted here

Build Beautiful.

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.