The Divi Theme secondary header lets you add a phone number and email address, and displays these along with a corresponding icon. However, there is no way to change the icon, should you want to do so. Here are a few ways that you can change the phone and email to something better suited to your purposes.
Replacing the Icons with another Elegant Themes Icon
Follow that link and scroll to the "Complete Set and Unicode Reference Guide" section and you'll see each icon listed along with a code such as "" (the icon for a mobile phone, in this case). If you remove the "&#x" and ";" you'll get a code (e.g. "e00b") that you can now use in the following CSS to change the phone / email icon:
/* Change the secondary header phone icon */
#et-info-phone:before {
content: 'e00b' !important;
}
/* Change the secondary header email icon */
#et-info-email:before {
content: 'e00b' !important;
}Related Post: Adding CSS to the Divi Theme
Replacing the Icon with a Font Awesome Icon
First load the Font Awesome icon font into your site. The easiest way to do this is to get the Font Awesome embed code (which they'll email to you). Paste the code you receive into the "Divi > Theme Options > Integrations > Add code to the head of your blog" box.
Then pick the Font Awesome icon you want to use. Click on that icon to get a page of information about it. On that page, in small writing, you'll find the unicode value for the icon, which will be something like "f10b" (which in this case is the code for Font Awesome's own mobile phone icon). You can now use the code with one of the CSS blocks below:
/* Change the secondary header phone icon */
span#et-info-phone:before {
font-family: FontAwesome !important;
content: ' 10b' !important;
}
/* Change the secondary header email icon */
span#et-info-email:before {
font-family: FontAwesome !important;
content: ' 10b' !important;
}Related Post: Adding CSS to the Divi Theme
All good, I worked it out. Set the default to what I wanted and created a query that worked for the tablet minimum width to what is in place already.
Okay, great! Thanks for the update, Grant, and I'm glad you got it sorted.
Hi there,
Wondering if you can help. On this site using the Divi Builder https://www.payrollmatters.co.nz/,
for the phone styling I am trying to get top of page phone number and email address to float:right. If I add float:right to the element (e.g. #et-info-phone) in the browser css console I get what I want but adding this to the site styles in a media query targeting max-width:475 it doesn't work. Where do I find a styles setting to override the Divi styles?
Thanks, Dan! I had the phone icon there before, but I think the sign of the times suggest no one really uses a telephone anymore and I thought I update with an image of a mobile phone. Also, I added a vertical-align: 2px to have the image of the mobile phone align with the text in case anyone was interested.
You're welcome, Louis. Yeah, updating the icon to a mobile phone makes a lot of sense. Thanks for the alignment tip :)
Thank you for this Louis, the default email icon vertical alignment has been bugging me for a while. In my case, I set it to -1 px. Can't believe I haven't thought of this before!
#et-info-email:before {
vertical-align: -1px!important;
}