How to add custom sharing icons png & center & space icons – Jetpack

Viewing 1 replies (of 1 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    You can customize the look of the sharing icons with Custom CSS. To do so, please your custom code at the bottom of your theme’s stylesheet, or in Appearance > Edit CSS in your dashboard.

    To change the icons used for Pinterest, you can use the following code:

    div.sharedaddy .no-text {
width: 29px;
height: 29px;
}
.sd-social-icon a.sd-button > span {
width: 24px;
height: 24px;
}

li.share-pinterest a.sd-button > span {
background-image: url('URL_TO_YOUR_IMAGE');
}

    You can then update the class name to change the icon for Facebook (li.share-facebook), Twitter (li.share-twitter), LinkedIn (li.share-linkedin), and email (li.share-email).

    I would like to have my icons centered. How can I do this?

    You can use the following CSS code:

    .post-wrapper div.sharedaddy .sd-content {
	width: 100%;
	text-align: center;
}
.post-wrapper div.sharedaddy .sd-content ul {
	display: inline-block;
}

    I also wanted to know how to space the icons further apart.

    You can use the following code:

    .post-wrapper div.sharedaddy .sd-content li {
	margin-right: 10px !important;
}

    Of course, you’re welcome to tweak the examples I have you to fit your needs.

    If you’re not familiar with CSS, you can have a look at these links:
    https://www.htmldog.com/guides/css/beginner/
    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    If you need more help with CSS, you can ask for help from CSS experts in CSS forums like these:
    https://css-tricks.com/forums/

Viewing 1 replies (of 1 total)
  • The topic ‘How to add custom sharing icons png & center & space icons – Jetpack’ is closed to new replies.