I am using the Service links module in Drupal 7.
I tried to change the icons of the links, but only the "general services" links are changed. The "widget services" staying like the original. I saw that is because the icon is coming from an URL and not from a picture on the computer.
How can I change the widget icon?
Is there a patch or an option on the module?
CSS solution for position: for services widgets (FB, pinterest, linkedin) you can not change images, for General Services (twitter, G+) you can upload your own images.
Here is my CSS code and links appear centered inline.
/* services share links */`
.service-links ul li {
text-decoration: none;
display: inline;
overflow: hidden;
list-style: none;
padding-right: 10px;
vertical-align: baseline;
float: left;
}
.service-links li {
display:inline;
vertical-align: bottom;
position: relative;
}
.service-links .service-links-linkedin-share-button {
top: 5px;
}
.service-links .service-links-facebook-share {
bottom: 5px;
}
The ideal way would be if the module allowed us to insert our own images to the site, but this was requested previously and Closed (won't fix) https://www.drupal.org/node/1895012#comment-10310687
I did however managed to find a workaround for this by inserting my own custom images using CSS, and adding the new images to my theme. I +1 this as a feature request, as hiding the existing images with 'display:none' is certainly not ideal.
You can see a live example of this code in action at http://www.kindconsumer.com in the 'Share' section at the bottom.
`.service-links a { width: 30px; height: 30px; color: #fff; display: block; overflow: hidden; float: left; padding-right: 5px; }
.service-links img { display: none; }
.service-links-facebook { background: url(../img/facebook.png) 0 0 no-repeat transparent; }
.service-links-linkedin { background: url(../img/linkedin.png) 0 0 no-repeat transparent; }
.service-links-twitter { background: url(../img/twitter.png) 0 0 no-repeat transparent; }`
