Code by Day | Explore By Weekend

How To Add More Icons To The Divi Social Follow Module 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!
Categories: Divi CSS Tutorials

#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.

How To Connect And Add Font Awesome Icons To Divi Youtube Video Tutorial by Pee Aye Creative

#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.

Facebook
.et-social-facebook a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Twitter
.et-social-twitter a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Google+
.et-social-google-plus a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Pinterest
.et-social-pinterest a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
LinkedIn
.et-social-linkedin a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Tumblr
.et-social-tumblr a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Instagram
.et-social-instagram a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Skype
.et-social-skype a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Flickr
.et-social-flikr a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
MySpace
.et-social-myspace a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Dribbble
.et-social-dribbble a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
YouTube
.et-social-youtube a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
Vimeo
.et-social-vimeo a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}
RSS
.et-social-rss a.icon:before {
	content: "xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}

#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 following snippet to the Divi>Theme Options>Integrations in the Add code to the < head > of your blog section. Then be sure to add the CSS class “pa-social-follow” to your module’s advanced tab.

<script>
jQuery(document).ready(function(){
jQuery(".pa-social-follow li a").removeAttr("title");
})
</script>

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.

26
Last updated Apr 15, 2021 @ 3:47 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

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

Thank you! Can’t wait to try it!

tandelkgamer
tandelkgamer
1 year 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 year ago

Hello Nelson, thank you very much!

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

Jhon Salinas
11 months 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

Sandesh Shrestha
Sandesh Shrestha
Reply to  Jhon Salinas
11 months ago

Don’t forget to add this custom class to your social media follow module .my-social-module.
 
It took me an hour to figure that out.

evelyn
evelyn
Reply to  Sandesh Shrestha
7 months ago

thank you so much!! that’s a great help~~

Jake Lines
11 months 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 »

Arquimedes
11 months ago

Thank you, thank you, thank you. As always, things that seem difficult you make it easy 🙂

Roshan Shrestha
Roshan Shrestha
10 months ago

NO need to add font awesome;
use Divi builtin icons
 
.et-social-rss a.icon:before {
   font-family: ‘ETmodules’;
   content: “\6a”!important;
}
 
icon link :
https://www.elegantthemes.com/blog/resources/elegant-icon-font
 

Last edited 10 months ago by Roshan Shrestha
asd
asd
9 months ago

not working whatsapp icon

dgsdgdsg.JPG
Christoph Rehse
Christoph Rehse
7 months ago

The Code-Trick does not seem to work in the footer.

Christoph Rehse
Christoph Rehse
7 months ago

How exactly do add the snippet from the Bonus section 5?

soporte
soporte
7 months ago

Thank you for your tutorial! I followed it step by step and it worked smoothly!

I have a question, I hope you can help me… I’m trying to replace tumblr icon for one email icon. I copied and pasted the code f0e0 but I’m not able to show it.

Is there any way to show an email icon?

Thank you once again!

Megan
7 months ago

Hello!

I went ahead and followed the steps however I don’t see the Yelp icon, instead it’s an empty box. Can you assist?

You’ll see the social media icons near the bottom of the page.

Taha
Taha
6 months ago

Code in note working on footer section

Screenshot 2020-10-20 195452.png
Phoebe
Phoebe
6 months ago

Hi, Thanks for the explanation.

But I don’t see the new icon, instead it is just an empty box.

This is the code.

Screenshot 2020-10-22 165803.png
Last edited 6 months ago by Phoebe
Phoebe
Phoebe

Thanks for the reply. I will keep note of it.
I also found another solution after watching your tutorial video above. In the video, for content, the code need to use both quotation marks and slash. While the previously, I only use either one. After fixing it up, it work perfectly fine.
Thanks for the tutorial.

Last edited 6 months ago by Phoebe
Mackenzie
Mackenzie
5 months ago

Struggling with hiding the tool tips.
So i have:

<script>
jQuery(document).ready(function(){
jQuery(".my-social-module li a").removeAttr("title");
})
</script>

In the header under integration. I have then added:

.my-social-module

In the CSS class of the social media module. The font awesome icons appear fine but just can’t just the tool tips

Mackenzie
Mackenzie

Removed the dot from CSS class of the social media module and still seeing tool tips. :/

webtips.png
Nicolas Troncoso
5 months ago

Hi, thanks a lot! it work perfect. Is there a way to change the label of the social media im replacing? ex: get to see spotify insted of google+?

Thanks again

Nicolas Rouanet
5 months ago

Thanks for this. I am experiencing an issue with tripadvisor icon . I just get a square as you can see on image.

Anybody had this issue and managed to solve it ?

Capture d’écran 2020-12-08 à 12.16.39.png
Dave
4 months ago

Good article, thank you. Just to clarify something that’s in the comments, but not completely clear from the text:

The icon codes need a backslash.

So where you replace the “xxxx” with the icon code you need to also add \ with the code.

So for example WhatsApp = f232 becomes \f232

Thanks again!

Last edited 4 months ago by Dave
Franjo Juric
3 months ago

Hi Nelson, I tried now everything like you described and it doesn’t work like it should. I also tried during the installing the Font Awesome PlugIn but still it doesn’t work. I fallowed all you steps. May would you check directly into our website why doesn’t work? I want to replace the Twitter with Telegram. The Link and all the stuff is ready but only the icon. My you can help me? Many thx from the Switzerland

Franjo Juric

I have installed the PlugIn and also I put the code in the <heady part in it where you have shown in the divi Themen. Than I went to the sides wehre are the icons and where I have prepared the icon “Twitter” which I want to replace. Than I fallowed your instruction with the extra CSS code to copy for twitter (which I did too) and than replace the “xxxx” into the number of the right icon. in my case is the icon Telegram. But when I fill in the numbers or the exactly code with the 4 numbers… Read more »

Franjo Juric
Reply to  Franjo Juric
3 months ago

Now I got it nelson. I missed the backslash which I only saw in the comments 🙂 THX for your answers below and up 😀 THX also to your blog Article 😀

Mr Daniel J Claxton
3 months ago

Hi Nelson! I’m pretty much there with this great tutorial, however I have an issue with the social module at the bottom of the page https://tomj11.sg-host.com/. The new icon isn’t in line with the others, am I doing something wrong?
Thanks, Dan

*Update* scarp that! I’ve adding 2px margin and fixed it!

Last edited 3 months ago by Mr Daniel J Claxton
Laura

Hi Nelson,
I followed Daniel’s tip and managed to align the icon squares. As a result my Telegram icon is not centered in the square. You can see it on my footer here:
https://www.eventilaura.com/

My code is:

.et-social-rss a.icon:before {
	content: "\f3fe";
	font-family: "Font Awesome 5 Brands"!important;
	margin: 2px;
}

have you got some tip? Thanks a lot,
Laura

Hemant Gaba
Hemant Gaba
Reply to  Laura
1 month ago

Could you please try using this code given below and see if that helps?

.pa-social-follow{
display: flex;
justify-content: center;
align-items: center;
}
.pa-social-follow li a{
display: flex !important;
justify-content: center !important;
align-items: center !important
}

Please paste this code in the WordPress Dashboard > Theme Options > Custom CSS Panel and let us know if that helped or not.

Laura
Reply to  Hemant Gaba
1 month ago

It worked smoothly! Thanks a lot man! 🙂

Hemant Gaba
Hemant Gaba
Reply to  Laura
1 month ago

I am glad that the issue is resolved now. 🙂

Alex
3 months ago

hello, thank you very much for that tutorial!

However, I encounter a small problem. I got a blank image where the icon is supposed to be. Would you know where the problem is coming from?

Thank you

Screen Shot 2021-01-23 at 9.47.02 PM.png
Anneloes
Anneloes
2 months ago

I’m trying to add the WhatsApp logo to the Social Media Module. I just can’t get it work correctly. The icon is not showing. It just shows a square at the background of the Google+ logo, which need to be replaced.
I’ve added the code to the head and the CSS. Changed the xxxx to \f232.
I’ve added Font Awesome manually, tried the plugin. Nothing works. I really don’t know what i’ve missed. Can you help me out?

Schermafbeelding 2021-02-16 om 03.10.07.png
Anneloes
Anneloes

Hi!
Yes, i’ve tried all the things mentioned. Tried it on several websites. Finally set up a fully fresh WP / Divi install. Still get a blank square.

  • Installed Font Awesome plugin
  • Added the css-code to page header

No other plugins are installed.

Naamloos.png
Last edited 2 months ago by Anneloes
Anneloes
Anneloes
Reply to  Anneloes
2 months ago

Solved!

I’ve added Font Awesome code to functions.php. Still don’t know why it didn’t work.

Just one last thing: the whatsapp icon isn’t visible on mobile. Any idea how to solve it?

Jose
Jose
2 months ago

Hey There! Thanks for this amazing tutorial, very easy to do it and it worked perfectly but I’m having a problem, the RSS is not working now, when you click on the RSS icon it just refresh the actual page. How can I fix it? Thanks in advance!.

mina
mina
2 months ago

Hi, your stuff so awesome buddy, I just have a little issue, when I add code for telephone icon from awesome font it doesn’t appear

Azhar
Azhar
2 months ago

It worked thanks a lot.

Sean Callanan
Sean Callanan
2 months ago

If we want to use an icon that is not a brand – say, an email icon in place of the Dribble icon, what Font Family do we use? I can’t get the “envelope” icon (\f0e0) to display.

Great tutorials, btw – thanks so much for these!

Sean
Sean

Any idea why the FA icons never seem to line up with the Divi icons – and a quick way to fix that? It always takes me a bunch of hunting around to find the selector that seems off by a pixel somewhere.

2021-04-05_19-07-25.png
Hemant Gaba
Hemant Gaba
Reply to  Sean
1 month ago

Could you please share the URL of the page where the icons are placed so that I could check?

peggy
1 month ago

Hi, would love to add Strava icon to my website, but it f428 doesn’t work. Could anyone help me? Thank you 😉
I follow your tutorials. Amazing job!

peggy
1 month ago

sorry. Now it works. I did mistake. Thank you 😉

sergio
sergio
1 month ago

Hi I tried your tutorial, but didn´t works…
I followed step by step several times.
1) put kit awesome on head integration
2) add css on options divi > css and settings page too.

I could change any icon per whtasapp icon.

Josh Taylor
Josh Taylor
17 days ago

I’m so confused. I followed this step by step, including installing font awesome, and I’m still getting random icons showing up when I change the icon code. Trying to get RSS to change to envelope for email.

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart