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!
▶️ Please watch the video above to get all the exciting details! 👆
Elegant Themes released an update after this tutorial was published, which includes additional icons. However, the concept from this tutorial is still relevant, and can be used for adding other icons which Divi does not yet include.
#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.
NOTE: The Divi 4.13 icon update now includes Font Awesome integration!
#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!
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
.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;
}Google+
.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;
}Tumblr
.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;
}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.
Check Out Our Super Cool Plugin!
Enjoy the hundreds of settings in the Divi Social Sharing Buttons Maker plugin, a beautiful new Divi module to add and customize social media sharing buttons and custom sharing options on any page, post, or Theme Builder template!
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!
Hi Sean,
You can check some of the other comments, but usually it is “Font Awesome 5 Free”
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.
Could you please share the URL of the page where the icons are placed so that I could check?
Hi Hermant – the page is in dev behind a login and not yet live, but this happened on the last site I used this method – and looking at some of the other screenshots in the comments, I’m seeing it on others’ instances as well, so it must be common? Do they line up for you right out of the gate?
Sorry for the little confusion. The code that you have placed above has a wrong icon slash in it and that’s why it’s not working. Please use the code given below and see if that helps:
.et-social-google-plus a.icon:before {
content: "\f262";
font-family: "Font Awesome 5 Brands"!important;
}
Let us know how it goes. 🙂
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 @Anneloess, I’ve got the exact same problem. Which Font Awesome code have you added on your functions.php file ?
Thank you very much.
PS : I hope you’ll see the message
I have not added anything to functions.php
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?