WordPress.org

Forums

Jetpack by WordPress.com
[resolved] Implementing (and styling) genericons in Jetpack Sharing (8 posts)

  1. Eva
    Member
    Posted 1 year ago #

    Hi!

    I'm currently working on a child theme for the Ryu theme which makes heavy use of genericons in circle elements. I'd like to adopt this style for the social sharing section and exchange the typical Jetpack sharing buttons for genericons styled with border-radius: 50% etc.

    What would be the best way to do this?
    Is it possible to nevertheless show the number of sharings next to the icons?

    Thank you for your help!

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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!

  3. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

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

  4. Eva
    Member
    Posted 1 year ago #

    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!

  5. tcMJH
    Member
    Posted 1 year ago #

    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?

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    http://jetpack.me/contact-support/

  7. avirupchatterjee
    Member
    Posted 10 months ago #

    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.

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 10 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic