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?

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:

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.

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

4 Comments

  1. 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
  2. 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 *