Add Custom Social Media Icons on Divi SOCIAL FOLLOW Module
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:
2. Add a NEW SOCIAL NETWORK, then add your social media Account URL and decide what color you want to use.
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.
4. Go to Divi’s THEME OPTIONS > GENERAL and scroll down to CUSTOM CSS
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
Here are the steps:
1. Open the SOCIAL FOLLOW module
2. Add a NEW SOCIAL NETWORK, then add your social media Account URL and decide what color you want to use.
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.
4. Go to Divi’s THEME OPTIONS > GENERAL and scroll down to CUSTOM CSS
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!
Thank you for this. It took my hours to find out. thank you
Hi there!
I’m so close to getting this to work but for some reason the background of the image is overtop of the icon. I can’t seem to figure out how to get it on top! Any suggestions?!
Thank you so much for this tutorial. Just what I needed and worked a treat. The icon doesn’t line up horizontally with the other social media icons, any idea why it is placed higher?
What is your URL Cheryl? I’d love to check it out and see how to fix it :)
I’m facing the same problem. The added icon is placed a bit higher than the other icons :(
Same issue here:(
I am having the same issue
I am having the same issue. Is there a solution?
Have you already tried the update I made last November 21, 2017. It is in the last paragraph of this post?
If you already had and still not getting the result, pls send me your URL and I’ll look into it.
Hey thanks for dropping by.
Let me know :)
I’m having the same issue.
Hello, thank ou for your great tips, I do what you make but my icon was a little bit upper than others, some 5 or 6 pix. Any reason?
Many thanks for your help
Thank you for this -works well, except that my icons aren’t linking correctly – they won’t open to the social channel, despite me adding the URL.
I’m not getting the icon to appear and nor are the icons inline. Custom icon is a transparent .png 32 x 32 and I’ve used the correct ID.
I was having trouble using this with Divi library elements that I was applying to my footer, so in the end I just manually added the css to the Social Icon custom CSS section and it worked a treat.
Thanks for pointing me in the right direction though!
Would you mind sharing your solution? It looks like my formula doesn’t work well for many
try this
.et_pb_social_media_follow_network_4_tb_footer.et_pb_social_network_link a.icon
I got it to work, but it disappears on tablet and mobile… any ideas on how to fix? thanks!