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!
Join subscribers on our YouTube channel and enjoy other Divi video 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.
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!
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;
}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 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!
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 one should we post it in, if not all or some?
Finally, although this works on actual pages, i.e., my contact page, it doesn’t seem to work when using a global footer – it just shows a square.
Be grateful for your help. Thanks again.
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;”
I am trying to get TikTok logo, but that appears as a brand, could this be a reason why it isn’t working? Scrolling through comments to see if anyone else has had the issue with the TikTok logo specifically.
If it is a brand make sure you are updating the snippet to say so as the font family.
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 and letters, I just see the code himself. so id doesn’t show the Telegram Icon.
That is what is not working correctly.
Hope you understand my English explanation 😀
with love Franjo
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.
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
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.
It worked smoothly! Thanks a lot man! 🙂
I am glad that the issue is resolved now. 🙂
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?
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
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?
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
What icon are you using exactly? Make sure you apply the correct font family as noted in other comments, as some are not brands.
It worked thanks a lot.
You’re welcome!
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. 🙂
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!
sorry. Now it works. I did mistake. Thank you 😉
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.
Hi Sergio,
Our tutorial does work, so the only thing I can do is try to help you find what you did differently. I would need a lot more information to help though.
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.
Hi Josh, be sure to check other comments here. This tutorial was not really about using Font Awesome, so I guess it kind of has some perquisites. You have to first check what category of icon you are using – an email icon is not a brand – so that certainly won’t work. It would just be “Font Awesome 5 Free” instead. Another trick with Font Awesome is to use font-weight: 900; to get things to work.
When I first tried it, I was just getting the code itself. Now I’m getting weird symbols when i plug in the code. I’m trying to swap Google+ to Trip advisor
.et-social-google-plus a.icon:before {
content: “/f262”;
font-family: “Font Awesome 5 Brands”!important;
}
There might be some console errors on your website which are breaking the icons. Could you please share the URL of the page where the icons are so that we can investigate further?
Hi! This is an awesome tutorial! I just have a little problem when I add the code:
.et-social-linkedin a.icon:before {
content: “xxxx”;
font-family: “Font Awesome 5 Brands”!important;
}
It says:
.et-social-linkedin a.icon:before {
Expected RBRACE
content: “xxxx”;
font-family: “Font Awesome 5 Brands”!important;
}
Unexpected token “}”
Can you help me please? I’m new editing the code on divi.
Thanks a lot!
I am afraid that I am not able to replicate the issue on my end. Please make sure that you are placing the code in WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and replacing the XXXX with the icon code that you want to use at the place of the LinkedIn icon.
Let us know how it goes.
I have the font awesome plugin installed and the code in the css tab of the theme options area; however, when i look on the site, it only shows the “xxxx” as the text. “xxxx” just an example, currently mine reads e07b.
Please make sure that you are using the slash (\) with the icon code. For example, if you are trying to replace facebook icon with yours then this will be the correct code:
.et-social-facebook a.icon:before {
content: "\e07b";
font-family: "Font Awesome 5 Brands"!important;
}
Let us know how it goes. 🙂
Hi! thanks for the tutorial, it’s great. So, I tried to use it in the header part of the Divi Theme Builder and it’s not working, I thought I was doing something wrong, so I tried it in a regular page and it does work. Do you think there’s a hack I’m missing to make it work in the header section?
The Divi Theme Builder does sometimes have specific CSS classes, that could be it. But without knowing what is not working or a link, I’m not sure how to help.
Thank a lot Nelson !
I’ve have apply your script to remove tooltips text and it work perfectly.
Best regards,
Gérard
That’s great, you’re welcome!
I just read through the comments and it seems I can’t use the branded icons (which is kind of funny considering most social networks I want to use icons for are considered a brand.) But, then there was a comment saying I can only use branded icons. I am confused and thought I’d leave a comment with as much information as I could.
The website is helptomoms.com and I am using the social media follow module. I’ve placed the font awesome kit code into the head and I’ve placed the google+ snippet you gave me into the pages CSS to see it live. branded icons aren’t working, but others seem to be. If the Tiktok branded icon won’t work, is there another option you can suggest?
You simply have to specify which icon font family it is, and that information is found on the actual icon page.
Hi,
Thanks for your great tutorial. However, I still have one problem. I managed to add Research Gate icon, but it is very small inside the frame of the previous icon. Can you please tell me how to enlarge it? Thanks.
Keep up the good work!
Hi Lan,
Could you please share the URL of the page where the icon is placed so that I can provide you a solution for that?
Hi Nelson I have done everything and it works up until step4.
The bonus step removing the follow doesn’t seem to work.
My icons are in the footer section will you please have a look and tell me what you see wrong.
https://balance4life.co.za
Thank you
Hi Louis,
The problem is that you have not given the custom class
pa-social-followto the social media follow module. Go to the Social Media Module Settings > Advanced > CSS ID & Classes and provide pa-social-follow as a custom class and then use the jQuery code.Let me know how it goes. 🙂
Had an issue with license key not activating “There was a problem activating the licence: Licence Key was already Successfully activated for http://www.abc.org” reached out to Nelson and received a response immediately and the issue is now resolved. Highly recommend this company!
Hey there,
We are extremely glad that we were able to help you in a right way. 🙂
Hi I followed your tutorial and it went mostly smoothly. My only issue is that the icon inside the square is a little too small for my liking, is there anyway to increase the size of the icon when using pseudo-element? I’ve tried using font-size with no luck, or do I have to use html code?
Hi Andrew,
Could you please try using font-size property with !important and see if that helps?
Let me know how it goes. 🙂
Hey @hemant that worked! Thank you so much for the quick reply and help.
Only issue now is that it is moving the original social square up so it’s not lined up! I made the background box white so you don’t notice but if you have any solutions to get the icon and original social square to line back up in line with the others as well I’d love to hear it.
Could you please share the URL of the page where these icons are placed for me to investigate further?
Hello!
Thank you for the tutorial!
J I’m trying to do the same thing with the icon: f2ce, but it doesn’t work!
Do you have any advice for me?
The icon is not a brand, it is a Solid style. So make sure to say “Free” instead of “Brands” and that should work.
Your tutorials have been an absolute lifesaver!
I was wondering if I were to change a MySpace icon for a solid icon such as a “phone” (f095) how should I proceed? I tried
.et-social-myspace a.icon:before {
content: “\f879”;
font-family: “Font Awesome 5”!important;
}
But it only shows a square. Any recommendation or comment on what am I doing wrong?
You would need “font-family: “Font Awesome 5 Free”; as the family, and you can also try adding font-weight: 900;
Thanks Nelson for another great tutorial and help! Everything worked fine changing two icons. Now I have to add one more which is not available on font awsome. Have you got advice how to add this to the social media module? Thanks.
Hi Monica,
If the icon code is not available then the long way is to place an image module containing the logo image in the same column where the social media icons are present and then inline it with the icons using CSS snippets.
You can also consider Divi Booster Plugin as it provides huge diversification of social icons.
hello,
i’m having an issue : the font is ‘blocked’ by a ‘previous’ css line that indicates “font-family: ETmodules!important;” so “font-family: “Font Awesome 5 Brands”!important;” is not taken into account .
but it works if I uncheck the box with the developper tool, so how can i override the first font indication as divi seems to have forced it with the !important css indication ?
or am i missing someting ?
thanks
Hi Damien,
Could you please share the URL so that I can investigate further?
Hi I have followed all the steps but when I amend to code snippet I just lose the icon. I have added the font kit and am trying to get goole+ to change to show the Telegram icon. I have added the snippet .et-social-google-plus a.icon:before {
content: “\f3fe”;
font-family: “Font Awesome 5 Brands”!important;
}
to the custom css box in divi theme options. Any help would be much appreciated. Thanks so much
Ok it show up on the site but not in the divi builder ?? anyway sorted I guess. Thanks for your great work
Hey Jim,
The result of the code will showcase on the live site only and will not show in a builder as the custom icons we provided are not the part of Divi.
Hey Jim,
The new Divi update has this feature inbuilt so it would be best if you update the theme and use the social icon you want. 🙂
Hello,
It does not work for me sadly.
I tried to replace the Flikr icon with the Tik Tok logo with this code:
.et-social-flikr a.icon:before {
content: “\e07b”;
font-family: “Font Awesome 5 Brands”!important;
}
However on front end the logo does not appear and instead a little white square is there like if the icon did not load.
Let me know if i did something wrong.
Thanks!
Hey Alex,
This code is working completely fine on my end:
.et-social-flikr a.icon:before {
content: "\e07b";
font-family: "Font Awesome 5 Brands"!important;
}
I guess the code you have posted has some issue in the quotes so copy this code and try using it and see if that helps.
If this doesn’t solve the issue then please make sure that you have connected Font Awesome properly.
Let me know how it goes.
for tik tok:
content: “\E07B”;
font-family: FontAwesome!important;
}
was having the worst problems trying to implement, but finally got it!
Hello.
_the icon to anchor.fm does not exist in the module.
In the additional icons that can be added there is no anchor.fm icon.
The icon is this one::
https://www.idealistica.co/images/anchor-Podcasts-idealistica.png
Hey Javier,
The guide is using the Font Awesome Icons and there is no icon for anchor.fm available there and that’s why we haven’t placed any code in the guide for that so in order to achieve that you need to use an image module, provide that icon image to the module, adjust the size, and place a link to that image and you will achieve the Social Icon for the anchor.fm
This is such an elegant solution but it’s not working for me. I have been fighting this for a while and I’m stumped. This is the code I have been using to replace the G+ icon with a solid “mug-hot” (f7b6) FA icon:
.et-social-google-plus a.icon:before {
content: “\f7b6”;
font-family: “Font Awesome 5 Free”!important;
}
I’ve tried using “Solid” instead of “Free”, I’ve changed 5 to 6 to account for FA updates, but it never shows up. The code is added to “Custom CSS” under Theme Options > General. I added the FA kit manually, but then deleted that and used the plugin with an API key, which finally got it to stop pulling the G+ icon, but as for why the solid mug-hot icon isn’t showing up, I’m at a loss.
Any advice/insight welcome.
Hey KimBoo,
Please use this code and see if that helps:
.et-social-facebook a.icon:before {
content: "\f7b6" !important;
font-family: "Font Awesome 5 Free"!important;
font-weight: 900;
}
I used this code to customize the hover text instead of hiding it:
jQuery(document).ready(function(){
jQuery(‘li.et-social-google-plus a’).attr(‘title’,’Follow on Dailymotion’);
})
In my example I was swapping Google+ for the Dailymotion icon.
Hope this helps some traveler out there!
Hi, thanks for the tutorial. Since Divi already includes the Fontawesome, you may want to update the tutorial.
I added the waze icon on the social follow module, and thanks to ET, we can save some steps, we just need the fontwasome code and add the snippet in the custom css or on the page the module is
And instead of “Font Awesome 5 Brands”!important; i added font-family: “FontAwesome”!important;
Example:
.et-social-weibo a.icon:before {
content: “\f83f”;
font-family: “FontAwesome”!important;
}
Thanks for the reminder, I will update the post!
Hi, thanks for the note at the top on how this is deprecated because of updates. But how? I so appreciate your detail here, but it’s unclear how updates in Divi make this no longer relevant.
Also, how do you add the new social media icons to the header, and then where do you put in the URL for those new icons?
Thanks!
Thank you for this article. What am I doing incorrect, I cannot get a telephone icon to show up.
.et-social-google-plus a.icon:before {
content: “\f095”;
font-family: “Font Awesome 5 Brands”!important;
}
I even installed the Font Awesome plugin.
A telephone icon would not be a “brand” so make sure to update the font-family to the correct term, maybe Font Awesome 5 Free
Hi Alex, thanks for this article. I would like to replace Twitter with Mastodon icon on my footer. Would you please-please post the code for this. The icon will be visible in my footer at http://www.tekshrek.com. Thank you very much and greetings Frank
This tutorial gives you the resources you need, so yes you can replace any icon with any other icon from Font Awesome.