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