Implementing (and styling) genericons in Jetpack Sharing

That’s a good idea! You can customize the style of the sharing buttons with some CSS. Since Ryu already loads the Genericons for you, you will only have to style the buttons, add the icons before each button, and set each icon to use the Genericons font.

Try adding the following CSS code to your theme stylesheet, or to your custom CSS editor under Appearance > Edit CSS in your dashboard:

/* Delete existing icons, and that white background appearing below each button */
.entry-content .sharedaddy a.sd-button {
	background: none;
	border: 0 none !important;
	box-shadow: 0 0 0 0;
	color: #fff !important;
}
.sharedaddy ul li a.sd-button > span {
	background-image: none;
}
.sharedaddy ul li .sd-button span.share-count {
	color: #fff;
}

/* Before each sharing button, we will use the Genericons font */
.sharedaddy a.sd-button:before {
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 16px/1 Genericons;
	font-size: 1.6rem;
	vertical-align: top;
}

/* Define the icon to use with each button */
.sharedaddy a.share-twitter:before {
	content: '\f202';
}
.sharedaddy a.share-facebook:before {
	content: '\f203';
}
.sharedaddy a.share-google-plus-1:before {
	content: '\f206';
}
.sharedaddy a.share-email:before {
	content: '\f410';
}
.sharedaddy a.share-press-this:before {
	content: '\f205';
}

That’s only an example; you’ll probably need to customize things a bit more to give it a perfect look! But you should be able to do everything through CSS.

I hope this helps.

Oh, and please share the results with us! I love Genericons, and I’m sure the results will look great!

You can also find a working example here:
https://halfelf.org/2013/sharedaddy-genericons/

Dear Jeremy,

I’m very sorry for responding this late, but thank you SO much! As you said, the code needed very little customizing, then everything worked out fine. You truly are a Happiness Engineer ??

I’ll post a link here as soon as the theme goes online!

Hi,

I’m using the Spacious theme for a blog in looking to learn WordPress on… An experiment basically!

But I notice that the genericons are not loaded automatically with the theme (they are not showing up in my FTP Client) BUT they are present on the site… I was playing around with them on Chrome’s “Inspect Element” thingy (I know this ‘thingy’ has a name… But maybe you could clarify!)

Why is this?

Could you post your site URL here, so I can have a look?

If you want it to remain private, you can also contact us via this contact form:
https://jetpack.me/contact-support/

Hello

Nice Post. I have tried that in my child theme css of twenty fourteen. But it is not working. I tried the link you have provided also. Same issue in both the case.

I used the following code

div.sharedaddy a.sd-button {
    padding: 10px!important;
}

div.sharedaddy .sd-content li a::before {
    font-family: 'Genericons';
	font-size: 32px;
	color: #fff;
}

div.sharedaddy a.sd-button>span {
    display: none;
}

div.sharedaddy .sd-content li.share-twitter a::before {
    content: '\f202';
    color: #4099FF;
}
div.sharedaddy .sd-content li.share-facebook a::before {
    content: '\f204';
    color: #3B5998;
}
div.sharedaddy .sd-content li.share-google-plus-1 a::before {
    content: '\f218';
    color: #DD4B39;
}

No luck what so ever. I have Genericon installed in my theme (Twenty Fourteen) but I am getting the out put as small blank box without any icons inside.

Any kind of help will be appreciated.

@avirupchatterjee You do not need to use any custom code anymore. As of Jetpack 3.0, the sharing buttons use Genericons by default.