Quantcast
Channel: WordPress.org Forums » [Jetpack - WP Security, Backup, Speed, & Growth] Support
Viewing all articles
Browse latest Browse all 37018

Jeremy Herve on "[Plugin: Jetpack by WordPress.com] How to add custom sharing icons png & center & space icons - Jetpack"

$
0
0

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:
http://www.htmldog.com/guides/css/beginner/
http://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:
http://css-tricks.com/forums/


Viewing all articles
Browse latest Browse all 37018

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>