In this post we will learn how to change the  color for the email and phone number in DIVI. We will also change the color of the social media icons like Facebook, Twitter etc. This is useful when you want to match the icons to the branding colors of your website. 

By default the icon for email, phone and social media will have the same color that you set for the text color in the secondary menu options. These text colors are set by going to the DIVI – Theme Customizer – Header and Navigation – Secondary Menu Bar – Text Color.

Color of email and social icons DIVI

Color of email and social icons – DIVI


Changing the color of the email, phone and social icons with CSS

To do this head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

Add the following lines of code. I have added CSS to change colors for the phone and email icons. Also for the social media I have included the CSS to change Facebook, Twitter and Google Plus Icons. 

/* Top header email, phone and social media icon colors */
#top-header #et-info-phone:before { color: blue!important;}
#top-header #et-info-email:before { color: blue!important;}
#top-header .et-social-facebook a.icon:before {color: blue!important; }
#top-header .et-social-twitter a.icon:before {color: blue!important; }
#top-header .et-social-google-plus a.icon:before {color: blue!important; }

I am setting it here to blue only as an example. You can always include a hex color code in the css code.  Here is what it looks like after your CSS has been applied. 

Change color of email, phone and social icons

Change color of email, phone and social icons

I hope this tips helps you in changing the colors of your icons if you need to. There are somethings for which you have to use CSS to change things in DIVI. The more you keep learning simple tips like this, the more you will get the hang of it and soon you will be able to inspect elements in the browser and write your own CSS.


Submit a Comment

Your email address will not be published. Required fields are marked *

I would love to hear about how I can help your business website. I have specialized in using the DIVI theme from Elegant Themes since the past five years. If you would like to see the projects that I have completed as a DIVI Designer, please do have a look at my portfolio. Please contact me and I will get back to you immediately.