The Divi Social Media Follow module allows you to set the colour of the icon. However, it is really the icon’s background colour you are setting, while the icon remains white. Sometimes you don’t want that square or circle around your social media icon, but just to colour the icon itself. To do this, you need some CSS.

But first, you probably want your icon background colour to match your row or section’s background colour. So make sure you set the icon colour in the module to either transparent, or the same colour as the background.

To set your Social Media Follow module icon colour sitewide, use the following CSS snippet, changing the colour to that which your heart (site) desires:

/* Social Media Follow Icon Color */
.et_pb_social_media_follow li a.icon:before {
color: #89D6F2!important;
}

To set your Social Media Follow module icon colour in only a particular place, use a CSS class. Give the row that houses your Social Media Follow module the following CSS class:

custom-social-media-color

Then use the following CSS snippet, changing the colour to that which your heart (site) desires:

/* Custom Social Media Follow Icon Color */
.custom-social-media-color .et_pb_social_media_follow li a.icon:before {
color: #89D6F2!important;
}

Where to paste the CSS snippet

Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.

Child Themes

We recommend using a child theme. It is your insurance against losing your custom work in updates. Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS). Click here to learn more about child themes and getting the most out of the Divi theme.