1

I want to change the icons of Share/Follow in SP2013. Also I want to change the position of these link. I am using design manager to create a master page. I can see the tags for the ribbon (welcome user. etc..) but no tags for Share/Follow.

3

All the icons you refer to are stored in a single file. A so called sprite image. You will find more on how this works the this article -> CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

The images in SharePoint are stored in the layouts folder of SharePoint. This means you should not edit or change this file. They could be overwritten by a Microsoft update. The file name that contains this image is spcommon.png.

To change the icons that are displayed you need to do some css magic. First hide the original images and assign a new background-image to the parrent element.

The following code hides the original icons and turn the background color of the parent element red. I only use this background color to highlight the css effected area. I also add background-image properties. These properties needs to be change to your new images be adding the path to the files inside your site collection or farm. Just insert the path to your image inside the url() value. I added some placeholder path for you there.

The following image show the effected by the code blow.

Shows changes by the code below

An this is the code for that.

/* Hide icon of shareing button */
#ctl00_ctl52_site_share_button .ms-promotedActionButton-icon img {
   display: none;
}

/* give share a new icon */
#ctl00_ctl52_site_share_button .ms-promotedActionButton-icon {
   background-color: red;
   background-image: url('path_to_your/customshareimage.png');
}

/* hide icon of follow button */
#site_follow_button .ms-promotedActionButton-icon img {
    display: none;
}

/* give follow a new icon */
#site_follow_button .ms-promotedActionButton-icon {
    background-color: red;
    background-image: url('path_to_your/customfollowimage.png');
}

Is it doable. Yes.

Is it recommended. No, because you have to brand it everywhere. On MySite, every team site and sub page. This surely can be accomplished by master pages and css but if a user hit a not customised site the they will wonder why the icons look different. So from a usability perspective I would recommend you not to change the default icons.

  • Yeah Stefan, this is not feasible solution for my ask.. Can anybody have other suggestions? I just want to change the "Share" icon.. Is there any way to create a custom button and assign "Share" functionality to that button? – SPDev Jan 3 '14 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.