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

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

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. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts – 

• Add Extra Text on your DIVI Top Header Before the Phone Number
• Turn Header Phone Number into Clickable Link in DIVI
• How to Align the DIVI Secondary Menu to Left or Center

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.