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. :/