By now you should know I love Divi. Â Technically, I’d say I love any WP “Modular “Theme or, even more broadly, I love WordPress and mutually exclusively Modular Based Themes, so the fact that those worlds collide with WordPress and Divi makes me all giddy inside.
My reaction when I realized all it could do is eerily similar to this young child hearing Katy Perry jam come on.
But I digress.
One feature Divi offers is a nifty top-header nav which allows the easy insertion of a contact phone and contact email by filling in two simple fields in Theme Settings under Appearance –> Customize.
(You can view the final at Redondo Manufacturing.)
However, the idea of placing an email address in html where web crawlers can sneak up and steal it is something I didn’t think anyone did anymore. Â Ever. Â While there are some needs for it and some very good workarounds, I wanted to see if I could replace it with some text that linked to my contact page, but also keep the cool email icon.
How’d I do it your ask? Â Thanks for asking.
Here you go:
- Make sure you’re using a child theme.
- Copy header.php from Divi/header.php into your child theme
- Find the #et-info id (php section)
- Insert some code:
<span id="ytext"><a href="http://redondo.orangepulley.com/project/contact/">Contact Redondo Manufacturing</a></span>
- Apply styling :
#ytext:before { content: "e076"; position: relative; margin-right: 4px; font-family: 'ETmodules'; }
This is a useful link to the ET Line Icon set and how to use it, but nowhere does it mention the font-family gotcha I bolded above. Â I worked with Elegant Theme’s excellent support and wanted to share this little nugget of wisdom…even if it’s just as a reminder to me.
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.
Logan, thanks for this. I was batting my head against the wall. Nothing else said I needed to add the font-family! THANK YOU!
So glad it helped! You are welcome. 🙂
It took me awhile to figure out how to interpret the codes in the chart you referenced to the correct number to use. I thought I’d share it here for those who come after me. So for instance the phone icon is listed as and I made it e090. The $#x all drop as does the semi-colon. Who knew? But it worked.
Thanks for sharing!