NOTE: This tutorial is depreciated and no longer needed due to a Divi update.

Our blood, sweat, and tears helped many of you. But ultimately updates like this are progress in the right direction for Divi!

Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add More Social Media & Brand Icons To The Divi Social Module

Nelson Miller Profile Orange
In this Divi tutorial you will learn how to add more icons to Divi in the Social Media Follow module! Use any social media or brand icon you want!

▶️ Please watch the video above to get all the exciting details! 👆

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

How To Connect And Add Font Awesome Icons To Divi Youtube Video Tutorial by Pee Aye Creative

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.

Facebook

.et-social-facebook a.icon:before {
	content: "\xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}

Twitter

.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;
}

Pinterest

.et-social-pinterest a.icon:before {
	content: "\xxxx";
	font-family: "Font Awesome 5 Brands"!important;
}

LinkedIn

.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;
}

Instagram

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

Divi Social Sharing Buttons Maker Plugin by Pee Aye Creative

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

140 Comments

  1. Nora

    Thank you! Can’t wait to try it!

    Reply
  2. tandelkgamer

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

    Reply
  3. Guillermo

    Hello Nelson, thank you very much!

    It is possible to do it too
    in changing icons in an blurb module?

    Reply
  4. Jhon Salinas

    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!

    Reply
      • Jhon Salinas

        Hello, yes, that is what I did but I hover the icons and still see the original follow message to google + or other services

      • Sandesh Shrestha

        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.

      • evelyn

        thank you so much!! that’s a great help~~

  5. Jake Lines

    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.

    Reply
  6. Arquimedes

    Thank you, thank you, thank you. As always, things that seem difficult you make it easy 🙂

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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 🙂

      Reply
  7. asd

    not working whatsapp icon

    Reply
  8. Christoph Rehse

    The Code-Trick does not seem to work in the footer.

    Reply
  9. Christoph Rehse

    How exactly do add the snippet from the Bonus section 5?

    Reply
  10. soporte

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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;”

      Reply
      • Gavin McNeill

        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.

  11. Megan

    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.

    Reply
  12. Taha

    Code in note working on footer section

    Reply
  13. Phoebe

    Hi, Thanks for the explanation.

    But I don’t see the new icon, instead it is just an empty box.

    This is the code.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
      • Phoebe

        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.

  14. Mackenzie

    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:

    .my-social-module
    

    In the CSS class of the social media module. The font awesome icons appear fine but just can’t just the tool tips

    Reply
      • Mackenzie

        Removed the dot from CSS class of the social media module and still seeing tool tips. :/

  15. Nicolas Troncoso

    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

    Reply
  16. Nicolas Rouanet

    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 ?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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;
      }

      Reply
  17. Dave

    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!

    Reply
  18. Franjo Juric

    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

    Reply
      • Franjo Juric

        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

      • Franjo Juric

        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 😀

  19. Mr Daniel J Claxton

    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!

    Reply
      • Laura

        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

      • Hemant Gaba

        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.

      • Laura

        It worked smoothly! Thanks a lot man! 🙂

      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  20. Alex

    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

    Reply
  21. Anneloes <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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?

    Reply
      • Anneloes <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        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.

        • Installed Font Awesome plugin
        • Added the css-code to page header

        No other plugins are installed.

      • Anneloes <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        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?

      • mathieu.perrot06

        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

  22. Jose

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

    Reply
  23. mina

    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

    Reply
  24. Azhar

    It worked thanks a lot.

    Reply
  25. Sean Callanan <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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!

    Reply
      • Sean <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        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.

      • Hemant Gaba

        Could you please share the URL of the page where the icons are placed so that I could check?

      • Sean <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        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?

      • Hemant Gaba

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

  26. peggy

    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!

    Reply
  27. peggy

    sorry. Now it works. I did mistake. Thank you 😉

    Reply
  28. sergio

    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.

    Reply
  29. Josh Taylor

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  30. Tala

    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;
    }

    Reply
    • Hemant Gaba

      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?

      Reply
  31. Ignacio

    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!

    Reply
    • Hemant Gaba

      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.

      Reply
  32. Brandon Martin

    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.

    Reply
    • Hemant Gaba

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

      Reply
  33. Daniela

    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?

    Reply
  34. Gérard VIALLES

    Thank a lot Nelson !
    I’ve have apply your script to remove tooltips text and it work perfectly.

    Best regards,

    Gérard

    Reply
  35. Gavin McNeill

    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?

    Reply
  36. Lan

    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!

    Reply
    • Hemant Gaba

      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?

      Reply
  37. Louis

    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

    Reply
    • Hemant Gaba

      Hi Louis,

      The problem is that you have not given the custom class pa-social-follow to 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. 🙂

      Reply
  38. it

    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!

    Reply
    • Hemant Gaba

      Hey there,

      We are extremely glad that we were able to help you in a right way. 🙂

      Reply
  39. Andrew Tran

    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?

    Reply
    • Hemant Gaba

      Hi Andrew,

      Could you please try using font-size property with !important and see if that helps?

      Let me know how it goes. 🙂

      Reply
      • Andrew

        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.

      • Hemant Gaba

        Could you please share the URL of the page where these icons are placed for me to investigate further?

  40. Alexandra Reix-Le May

    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?

    Reply
  41. Elle

    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?

    Reply
  42. Monica

    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.

    Reply
    • Hemant Gaba

      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.

      Reply
  43. damien3000

    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

    Reply
    • Hemant Gaba

      Hi Damien,

      Could you please share the URL so that I can investigate further?

      Reply
  44. Jim Hewitt

    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

    Reply
    • Jim Hewitt

      Ok it show up on the site but not in the divi builder ?? anyway sorted I guess. Thanks for your great work

      Reply
      • Hemant Gaba

        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.

    • Hemant Gaba

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

      Reply
  45. Alex

    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!

    Reply
    • Hemant Gaba

      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.

      Reply
    • Creative Junkie

      for tik tok:

      content: “\E07B”;
      font-family: FontAwesome!important;
      }

      was having the worst problems trying to implement, but finally got it!

      Reply
    • Hemant Gaba

      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

      Reply
  46. KimBoo York

    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.

    Reply
    • Hemant Gaba

      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;
      }

      Reply
  47. David

    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!

    Reply
  48. Alex Lp

    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;
    }

    Reply
  49. Spa La

    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!

    Reply
  50. Abel Jeffcoat

    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.

    Reply
  51. Frank @tekshrek

    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

    Reply
  52. Loya, Helvetia

    Thank you boss – THIS one worked 🙂

    Reply
  53. César Mejias

    Instead of delete hover i use the same code and add pseudo-class to specific what tag i want to “title” attribute edit. I use the Google + icon and change for Discord icon, so only modify the title.

    jQuery(document).ready(function(){
    // jQuery(“.pa-social-follow li a”).removeAttr(“title”);
    jQuery(“.pa-social-follow li:nth-child(2) a”).attr(“title”, “Follow on Discord”);
    })

    If there is a some error please comments. Thank you.

    Reply
  54. Jay

    I don’t understand what has the recent updates of Divi makes this tutorial obsolete. Divi support told me to follow this tutorial lol. Then I told them its outdated then they wanted me to manually go into the code myself on the child theme and be a coder essentially.

    Reply
  55. Mike Monnerie

    Thank you for this great share. I managed to replace “dribbble” with “facebook messenger” icon, and even removed the explanation “title”. It would be MUCH better if we could simply change the title from “dribbble” to “fb messenger”, is that not possible? In my case, I have two facebook profiles, one german and one english language, and it would be perfect to be able to define the title for each icon. Couldn’t divi just insert this new field to each button? Makes a lot of sense, right? To see my very long SM buttons, see https://mike.monnerie.at/big54life/

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Mike,
      I hear ya, I don’t know of any way now. We will add this kind of thing to Divi Assistant after Divi 5.0, anything like this is going to be added, so let us know if you have more ideas too!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart