How to Use a Custom Social Icon in Divi

This post may contain referral links which may earn a commission for this site

The Divi Theme comes with an option to add some social network icons to the top header and the footer. However, the set of icons is quite limited. Third party plugins such as my own Divi Booster plugin add lots more icons covering most of the main social networks. But what if your niche social network isn't covered?

Replace a Default Divi Social Icon with your Own

One way you can add your own custom icon is to replace the icon of one of the built-in social networks with your own image file.

To do so, pick one of the built-in icons you aren't using and add that icon to your site along with the link URL for your profile / social network page. In this example I'll be replacing the Google plus icon.

Then add CSS similar to the following:

.et-social-google-plus a.icon:before { 
	background: url('https://simpleicons.org/icons/patreon.svg'); 
	content: '' !important; 
	display: inline-block !important;  
	background-repeat: no-repeat;
}
.et_pb_social_media_follow .et-social-google-plus a {
	margin-bottom: -9px;
}
.et_pb_social_media_follow .et-social-google-plus a.icon:before { 
	display: block !important;
	height: 16px;
	width: 16px;
	margin: 8px;
}
#top-header .et-social-google-plus a.icon:before {
	height: 14px;
	width: 15px;
	margin-bottom: -1px;
}
#main-footer .et-social-google-plus a.icon:before { 
	height: 24px; 
	width: 24px; 
	margin-bottom: -1px;
}

You should replace the URL used in the code above with the URL of your own icon file. If you don't have a URL for your file, upload it to your WordPress media library and it'll generate one for you. 

If you're replacing a different icon, you'll need to replace each instance of ".et-social-google-plus" with the class name of the icon your replacing.

This code should replace the icon in the header, footer and social media follow module.

Changing the Social Media Follow Module Tooltip

If you use the code above to change the icon in the social media follow module, you'll find that the tooltip text (which you see when you hover over the icon) will still say "Follow on Google+". To change this, you can use jQuery code such as the following:

<script>
	jQuery(function($){
		$('.et_pb_social_media_follow .et-social-google-plus a').attr('title','Follow on Patreon');
	});
</script>

Hundreds of new features for Divi
in one easy-to-use plugin

13 Comments

  1. Hi! First thank you for your great Plugin, it's an enormous help especially for Divi Beginners like me 🙂

    I tried to integrate some Social Media Icons to my navigation menu. To do so I went to the Divi Booster Site wide Setting and added my LinkedIn and Vimeo urls to the form. That worked great and the icons are shown now in my menu.

    I also need Behance, so I clicked on the link below to add it via customizer. But that didn't work. Did I miss something? Many thanks and best wishes!

    Reply
    • Hi Sabine, I'm really pleased the plugin has been helping 🙂

      You should be able to get to the social icons customizer section by going to:

      Divi > Theme Customizer > Divi Booster > Social Media Icons

      That link you're referring to uses a redirection method built in to WordPress to allow direct linking to the customizer section. While it's convenient for linking to a customizer section, unfortunately, it can occasionally fail to redirect if something is blocking it, such as a JavaScript error in the customizer.

      If you're still having trouble getting to the customizer section, perhaps you can send me a login through the contact form so that I can take a look for you? Thanks!

      Reply
      • Hi Dan!

        Thank you so much for your quick answer.

        I'm afraid that I haven't explained my problem properly. I can click on the link and the customizer opens. That's all well.

        In the Customizer I selected Behance and linked to the profile. But the icon isn't shown on the website. I also need Xing, but that doesn't work, too.

        I installed a Divi Child Theme (Joshua), perhaps that's the reason, why it doesn't work?

        Thanks for your nice offer to help me by taking a look. I will send you the login via form. Thx

        Reply
        • Hi Sabine, thanks so much for the login. I've been able to track the issue down – the icons weren't being added correctly when used in the slide-in menu. This will be fixed in the next update (v3.2.5). I have a bit more testing to do, but I should hopefully be able to release it in the next few days. ​I hope it helps, but let me know if you're still having problems with it after that. Thanks!

          Reply
  2. Hello, it works great for me, but at the icon's hover , I always have "follow us on google +". How to change that?

    Thank's for help 😀

    Reply
    • Hi Mélanie, am I right in thinking you're using the icon in the social media follow module? If so, I've just updated the post to add a section on changing the tooltip. I also made a bit of an update to the CSS to use a new example icon and improve icon positioning in the latest Divi. But if you've got it working the way you like already, there's no need to change it – the tooltip code should work regardless. I hope it helps.

      Reply
  3. I have tried using this method, but the icon then displays as the pixel squares, and doesn't display the icon I've uploaded (svg)
    Anyone know why this might be?

    Reply
    • Ignore last comment, got it working 🙂

      Reply
      • Okay, great! Let me know if there's anything else I might be able to help with, Abbie. Thanks!

        Reply
  4. Hi Dan, I tried your advice on swapping out a social icon that you don't have with one that you do. I followed your instructions and replaced the media URL, and also used the Google+ icon that was in your example. It didn't work for me. Any thoughts? I'd like to add Ko-Fi and Tee Public and right now am rigging the header and footer social media links with the placeholder icons you have in your stack.

    Reply
    • Hey gc, I had a play around starting from how you currently have it set up and came up with this for Ko-Fi. It's a bit different from the code in the post as it is modifying the Divi Booster added kobo icon, rather than a built-in icon. It also does a bit of trickery with filters to convert the black SVG to the right colors. It seems to work quite well (for me at least):

      .et-social-icon a.socicon-kobo:before { 
      	background: url('https://simpleicons.org/icons/ko-fi.svg'); 
      	filter: invert(100%); /* Convert black SVG to white */
      	content: ''; 
      	display: inline-block;  
      	vertical-align: bottom;
      }
      #top-header .et-social-icon a.socicon-kobo:before { 	
      	height: 16px; 
      	width: 16px; 
      }
      #main-footer .et-social-icon a.socicon-kobo:before {  
      	opacity: 0.35;
      	height: 24px; 
      	width: 24px; 
      }
      #main-footer .et-social-icon a.socicon-kobo:hover:before {
      	/* convert black SVG to #2EA3F2 (calculated using: https://codepen.io/sosuke/pen/Pjoqqp) */
      	filter: invert(57%) sepia(73%) saturate(4107%) hue-rotate(186deg) brightness(110%) contrast(90%); 
      	opacity: 1;
      }
      

      It's linking directly to the SVG at https://simpleicons.org/icons/ko-fi.svg so you probably want to download it, add it to your media library and update the icon.

      I couldn't find a good online icon for Tee Public – there are some images but I was just wondering if you already had one uploaded ideally with a transparent background? It would be better to start from one you already have on your site, so if already have a media URL for one, please let me know and I'll try to do a similar thing for it.

      Hope that helps!

      Reply
  5. Hi – any chance you could add the Mastodon icon (I notice it's used as the example!) into your plugin?

    Reply
    • Hey Dave, you're in luck. Just yesterday I updated Divi Booster to the latest version of the socicon icon font. This new version of the icon font now lets Divi Booster add over 250 social network icons, and one of those is Mastodon. I haven't released the update yet (version 2.8.3), but will hopefully be able to do so very soon. Hope that helps!

      Reply

Submit a Comment

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