How to change the color of the footer social icons in divi

Feb 21, 2018

Changing the color of the footer social icons in Divi is simple to do using the Theme Customiser. However, it only lets you choose the same color for all social icons.

Here’s a simple CSS fix that will let you pick out the colors of each social icon independently.

Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options), and it will change the icons to be the official color related to each social platform:


#footer-bottom .et-social-facebook a {
color: #3b5998;
}

#footer-bottom .et-social-twitter a {
color: #4099FF;
}

#footer-bottom .et-social-google-plus a {
color: #d34836;
}

To change the icons to different colors, all you need to do is change the color hex (e.g. #3b5998) to which ever color you’d like.

If you’re not sure which color hex you’d like to use there’s a couple ways you can find the right color:

  1. Use W3 School’s color hex pixer
  2. If you’ve seen a color you like on another website, you can download ColorPick Eye Dropper chrome extension to find the color hex directly in your browser.

Let me know if you have any questions in the comment section below!

Related posts

Change image on hover in Divi with CSS

Having an image which changes on hover is a cool effect, but unfortunately it's not a native feature of Divi. Luckily though with a little bit of CSS it's an easy effect to build yourself. In part 1 of this tutorial I'll walk you through step-by-step on how to create...

3 Divi blurb hover effects (CSS)

Now Divi has the option of turning any module into a link, I often find myself making sections with blurbs which are linked to other areas of the website. The only issue though is it’s not that obvious these blurbs are links, as the only thing to show they’re...

CSS 3D Website Mockups in Divi

3D mockups are a great way to show off your web design work, and also a lot easier to make than you might think! There are a couple different ways you can achieve this look: 1. Photo editing software (e.g. Photoshop) 2. CSS The problem with the first method is 1) you...