How to Use a Custom Social Icon in Divi

|

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?

Note: See this post if you want to use a custom icon in the social media follow module.

Replace a Default Divi Social Icon with an Image Icon

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

Replace a Default Divi Social Icon with a Different Divi Icon

An alternative to replacing one of the Divi icons with an image is to replace the icon with another from Divi's built-in icon set. For example, to replace the Google+ icon with a YouTube icon, you can use the following CSS:

.et-social-google-plus a.icon:before {
	content: "\e0a3" !important;
}

See here for a list of icons included in Divi's built-in icon set, along with their icon codes. Thanks to Sadi for this tip!

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>

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

Divi Booster

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

22 Comments

  1. Hey Dan,

    This was an excellent tutorial and worked perfect except for one small issue. The icon I have replaced in the Social Media follow section is sitting by what looks like 4 px below the others. What would be causing that or can I change in the CSS to accommodate that? I don't want to go changing code willy nilly.

    Reply
    • Hey Adsy,

      Try removing the following from the CSS you copied for the post:

      .et_pb_social_media_follow .et-social-google-plus a {
          margin-bottom: -9px;
      }
      

      It looks like that CSS rule is no longer needed (or helpful) in the latest version of Divi. I've removed it from the post above.

      Let me know if you need any further help with it. Thanks!

      Reply
    • Thanks again, Sadi!

      Reply
  2. Nice post, however when I was testing I found the following is a much more easier way of implementing what I needed.

    .et-social-twitter a.icon:before {
    content: "\e09d" !important;
    }

    .et-social-google-plus a.icon:before {
    content: "\e0a3" !important;
    }

    and the codes list are available here

    Reply
    • Hey Sadi. Yeah, this is definitely an easy way to go if the icon you need is in the built-in Divi icon set. I've added a section to the post with your technique. Thanks for sharing it!

      Reply
  3. thanx, it helped for me

    Reply
  4. 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
  5. 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 :D

    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
  6. 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
  7. 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
  8. 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
      • Looking forward to this update!

        Reply
        • Hey Rose, the update I was talking about (v2.8.3) has long since been released :) It's now up to v4.0.2. So if you update to the latest version you should be able to add the Mastodon icon. If you have any trouble updating or using the icon, just let me know. Thanks!

          Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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