Add Custom Social Media Icons on Divi SOCIAL FOLLOW Module

Jul 23, 2016

Elegant Themes has been generous to share a tutorial on how to use SOCIAL FOLLOW module on their blog here: http://bit.ly/2a1UJlA. Although there are already a handful of well known social media sites available with this module, like Facebook, Twitter and Instagram, there are still a ton of other sites that website owners may want to add on their profile that are not available on its current line up. Allow me to share with you here the solution I came up with. Here’s how you can add social media icons that are not available on Divi SOCIAL FOLLOW module.. Watch this quick video or go through each of the screenshots below:

Here are the steps:

1. Open the SOCIAL FOLLOW module b1 2. Add a NEW SOCIAL NETWORK, then add your social media Account URL and decide what color you want to use. b2 b3 3. Grab the CSS ID of the social media module by clicking on CUSTOM CSS and then click anywhere inside the box of SOCIAL ICON. The CSS ID will appear next to it. Save this ID (on a note pad) and then hit SAVE and publish the page. b6 4. Go to Divi’s THEME OPTIONS > GENERAL and scroll down to CUSTOM CSS b4 b5 5. Add the following codes: /**custom social media icon**/ .et_pb_social_media_follow_network_5 { background: url(https://youriconURL.com) no-repeat; } 6. Click SAVE CHANGES and you are done. UPDATE: November 21, 2017
A handful of you guys have sent me emails asking why your custom icons are not showing. Thanks for sending me those questions :) Anyway, as I did my research I noticed two common reasons why that is happening (1) the logo used was too big, pls only use 32×32 pixels and (2) make sure that you used the correct CSS ID for your custom social media module. Thank you guys for watching this video… I appreciate it!
Share This