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/