Add More Icons In Divi
Style And Customize Icons Directly In Divi
There are so many icons from brands and logos and social media sites out there that is is hard to keep track of them all. Those of use who use Divi regularly know that Divi does not have all of the icons we need, and so we go looking for ways to add them. The best way to add more social media and brand icons in Divi is to add them to the Divi Social Follow Module. That’s right, once we add the icon code we can style and customize them how we want directly in the Divi Builder!
#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.
.et-social-facebook a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-twitter a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-google-plus a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-pinterest a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-linkedin a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-tumblr a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-instagram a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-skype a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-flikr a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-myspace a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-dribbble a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-youtube a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.et-social-vimeo a.icon:before {
content: "\xxxx";
font-family: "Font Awesome 5 Brands"!important;
}.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.
Thank you! Can’t wait to try it!
You’re welcome, Nora! Let me know if you add these to your gorgeous website, I like it!
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+.
Hi there,
This is a great point, I have updated the tutorial to add this code snippet 🙂
Hi, but still follow us on Google is appearing
Please try the tip at the end.
Hello Nelson, thank you very much!
It is possible to do it too
in changing icons in an blurb module?
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!
Hi Jhon,
of your blog section in Divi Theme Options Integrations tab and it isn’t working? It should 🙂So you are putting this in the
Hello, yes, that is what I did but I hover the icons and still see the original follow message to google + or other services
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.
thank you so much!! that’s a great help~~
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 »
Hi Jake,
section. Also be sure to change the CSS class from “my-social-module” to something else, and to match that in the CSS class in the advanced tab of the module.You can follow this guide for understanding where to add code in Divi: https://www.peeayecreative.com/where-to-add-custom-code-in-divi-css-javascript-php/ In your example, since it is jQuery, you would add this to the
Thank you, thank you, thank you. As always, things that seem difficult you make it easy 🙂
Thank you, I do my best to make it easy! 🙂
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
I think you missed the point. Yes, you can do this and that’s great that you shared, but you won’t find thousands of brand and social media icons in the built-in font 🙂
not working whatsapp icon
It definitely works. Make sure your have Font Awesome integrated!
The Code-Trick does not seem to work in the footer.
This is for the Social Media Follow module…not the old, outdated Divi footer icons 🙂
How exactly do add the snippet from the Bonus section 5?
Hi Christoph, the instructions are right there above the code snippet 🙂 To remove this, just add the following snippet to the Divi>Theme Options>Integrations.
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!
Hi there,
There is always a way. Most likely it is due to the Font Awesome font family. Can you try using Font Awesome 5 Free instead of brands, and also add “font-weight: 900;”
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.
Hi Megan, not sure, but you are missing the forward slash \ before the icon code. See if that solves it.
Code in note working on footer section
Looks like you are missing a forward slash \ but I can’t tell without the link.
Hi, Thanks for the explanation.
But I don’t see the new icon, instead it is just an empty box.
This is the code.
Hi Phoebe,
The RSS icon is not a brand, so that right there is the problem. You have to reference the style in Font Awesome, in this case it is solid not brands so just try “Free” instead of brands and that should work.
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.
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:
In the CSS class of the social media module. The font awesome icons appear fine but just can’t just the tool tips
Make sure you are not adding the dot at the beginning of .my-social-module
Removed the dot from CSS class of the social media module and still seeing tool tips. :/
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
Hi Nicolas,
I’m not sure what you mean.
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 ?
Hi Nicolas, it is probably due to the right Font Awesome name, as some are classified differently like “Brands” or “Solid” for example. So you have to check in Font Awesome which one this falls under. I tested this for you and this snippet works:
.et-social-facebook a.icon:before {
content: “\f262”;
font-family: “Font Awesome 5 Brands”!important;
}
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!
Yes, currently the slashes are being stripped on my site, not sure why yet but hoping to get it solved soon.
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
Hi Franjo,
What is not working exactly?
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 »
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 😀
Oh okay great, yeah sorry we are working to fix the backslash issue!
Okay, can you share the website and the exact code that you used?
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!
Hi Daniel,
Glad to hear you got it! I’ll leave it here for others to benefit from as well.
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
I’m not sure Alex, maybe you have some styling for color and background that is affecting all the icons?
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?
Hi Anneloes,
Have you tried all things mentioned in the comments as well?
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.
No other plugins are installed.
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?
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!.
Hi Jose,
I’m not sure but that is very odd and would not be caused by anything in our tutorial. Maybe check the link inside that social item?