How To Add More Social Media Icons To The Divi Social Follow Module YouTube Video Tutorial by Pee-Aye Creative

How To Add More Social Media & Brand Icons To The Divi Social Module

In this Divi tutorial you will learn how to add more icons to Divi in the Social Media Follow module! Use any social media or brand icon you want!

#1. Add Font Awesome To Divi

The first step is to make sure you have Font Awesome integrated into your website. Font Awesome is an icon web font, and has a huge selection of free and paid icons that you can use. If you already have this integrated, you can move on to step #2. If not, please refer to my guide on How to Add Font Awesome To Divi.

#2. Add An Icon You Don’t Want

First of all, add all the icons you want to use. Then, add some icons you don’t want, for example, a Google+ icon.

Here’s the concept. Add an icon you don’t want, then use CSS to replace the icon with one you want. You can then style the icon directly in the module!

#3. Find the Icon CSS Selector

Next, we need to select the correct CSS class for the icon or icons that we want to replace. Here’s a handy guide for you. This can be confusing, but it will make more sense when you go to step #4. Let me explain more.

The snippets below are what tells the icon to be replaced with another icon. So if you want to replace the Google+ icon with a Yelp icon, you will start with the snippet below for Google+. Then go to step #4 and replace the “xxxx” with the appropriate code!

You can place your code snippets in the Divi>Themes Options>Custom CSS box, or in your Divi child theme.

#4. Add The Icon Code For the Icon of Your Choice

Below is a list of as many social media icons I could think of and their Font Awesome codes. Now all you have to do is choose and icon and CSS snippet from above and replace the “xxxx” with the icon code.

WhatsApp = f232
TripAdvisor = f262
Yelp = f1e9
Discord = f392
Telegram = f3fe
Slack = f198
Stack Overflow = f16c
Snapchat = f2ac
WeChat = f1d7
Tumblr = f173
Skype = f17e
Airbnb = f834
Viber = f409
Line = f3c0
Reddit = f281
Foursquare = f180
Vimeo = f27d
Stumbleupon = f1a4
Delicous = f1a5
Vine = f1ca
Viadeo = f2a9
Xing = f168
DeviantArt = f1bd
Flickr = f16e
Meetup = f2e0
Quora = f2c4
Github = f09b
Behance = f1b4
Blogger = f37c
Codepen = f1cb
Dailymotion = f952
Facebook Messenger = f39f
Etsy = f2d7
Medium = f3c7
Patreon = f3d9
Spotify = f1bc
Soundcloud = f1be
Strava = f428
WordPress = f411
QQ = f1d6
Ravelry = f2d9
Renren = f18b
500px = f26e

Need More Icons?

This is just a selection I chose, but there are a lot more icons to choose from over on the Font Awesome website.

#5. Bonus: Remove The Hover Tooltip

Someone pointed out that when we use another icon, such as the Google Plus icon, that the hover tooltip still says “Follow Us On Google+” which looks bad. To remove this, just add the follow snippet to the Divi>Theme Options>Integrations.

Need More Icons?

This is just a selection I chose, but there are a lot more icons to choose from over on the Font Awesome website.

8

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nora
1 month ago

Thank you! Can’t wait to try it!

tandelkgamer
tandelkgamer
1 month ago

We will require a bit of jquery for modifying the text that appears on top of those icons. Titles cannot be changed via CSS but we require a way to modify Title Text to custom we keep it. Do you have any idea how we can modify it properly. I had added Discord icon on Google Plus but now when scrolling on top of it , it will show Follow us on Google+.

Shakhobbek

Hi, but still follow us on Google is appearing

Guillermo
Guillermo
1 month ago

Hello Nelson, thank you very much!

It is possible to do it too
in changing icons in an blurb module?

Jhon Salinas
9 days ago

Hello I have tried the Remove The Hover Tooltip but it didnt work in any of the sections in the DIVI options, integrations, maybe can you explain this more? I guess I am doing something wrong, thank you for your work!, changing the icons worked perfectly!

Jhon Salinas

Hello, yes, that is what I did but I hover the icons and still see the original follow message to google + or other services

Jake Lines
2 days ago

Just to say this was really useful, however, I’ve run into two problems – hoping you can help? I’m still getting the hover of ‘Google +’ when applying this code: <script> jQuery(document).ready(function(){ jQuery(“.my-social-module li a”).removeAttr(“title”); }) </script> The instructions say to post under “Divi>Theme Options>Integrations”, but there are four possible fields: – Add code to the < head > of your blog – Add code to the < body > (good for tracking codes such as google analytics) – Add code to the top of your posts – Add code to the bottom of your posts, before the comments Which… Read more »

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart