Change Jetpack Social Sharing icons

Last week I described how to style the WordPress Jetpack Plugin social media buttons using CSS. In that post I provided the CSS script to change the social media image for each button (each social media icon on the Social Media buttons is an 16px by 16px image). As my regular readers will know, I’m a great fan of icon fonts as they are super simple to style with CSS, are far quicker load than rendering images and retain great resolution at most sizes. So I decided to change the Jetpack Social Media button image icons to icon fonts and here is how I did it.

Which icon font to use for Social Media buttons

There are many great icon fonts available for free out there. WordPress even loads its own icon font in the Dashboard so we could use that (although we’d need to add a bit of PHP to functions.php to get Dashicons to load in visitor facing pages and posts). For ease of use I used Genericons which is an icon font provided free by the developers of WordPress.

Before we can use any of the Genericon icon fonts we need to load the icon font CSS file. Ideally we’d copy the necessary icon font files to our webserver then enqueue CSS file using something like

But, just for testing purposes, we’ll cheat and use a CDN to provide the Genericons CSS addition to loading the CSS via CSS @import. jsDelivr are kind enough to provide delivery of the necessary files via a CDN so here is what we add to our CSS file within WordPress to load Genericons

@import url("//cdn.jsdelivr.net/genericons/3.0.3/genericons.css");

How to change the icon for Social Media buttons

To change the icon currently being used in the buttons we first need to remove the image e.g. the Facebook social media button is using an image to display the Facebook logo (we use CSS to remove the image). Once we’ve removed the image we use CSS to add the Genericon icon font we want and then add a bit more CSS to position the icon and make the button look good.

The first step is to go to the Genericons website and choose the icon font you want to use for each button; for example, click the Linkedin icon you want to use and then click Copy CSS and , well, copy that CSS as that CSS will be used to show the Linkedin icon on your button.

Using the Linkedin example above, we just need to add the following CSS to WordPress to, first, remove the existing image showing on the Jetpack Social Media sharing button, then show the Genericon Linkedin icon font (there is also a bit of other CSS to get the Genericon and button to display nicely)

Mailchimp Training Near You

What our clients say

"Gary was awesome! He has a fantastic way of making everything rather simple and straightforward. I definitely left with a lot more knowledge, confidence and ideas than when I walked in. Thanks Gary!" Fiona