0

My SharePoint 2013 site icons are not showing properly. It's showing as shown below. Please provide any help to resolve this issue.

enter image description here

regards...

3
  • are you using a custom solution which also adds a button and an icon to the bar? Have you adapted a theme or do you use a custom css in master page?
    – Celophysis
    Commented Jul 30, 2018 at 14:25
  • Have you modified master page ? Please check with SharePoint Designer and you could trace the issued CSS style via Browser Developer tool.
    – Jerry
    Commented Jul 31, 2018 at 9:20
  • i didn't change anything. when i'm creating new site also it's happening. Commented Jul 31, 2018 at 10:15

1 Answer 1

0

You are going to need to do some debugging to figure this issue out. Please inspect the icons using Firefox inspector (preferred) or any browser inspection tool. The icons should be coming from spcommon.png, which is stored in the Images directory (TEMPLATE/IMAGES on the web server). That file should match this image:

spcommon

The image should also have a transparent background. These icons are CSS sprites, so an image is referenced and then only a small portion is displayed in the web site. CSS controls what is displayed. CSS sprite code essentially creates a window and you only see what the window allows. The image can be moved around to show a different area of the image through the window. Most of the icons in SharePoint are coming from a single image file. CSS sprites should be managed from a CSS file, but unfortunately SharePoint manages it from inline styles in the HTML.

Looking at this marked up version of the same image, what is highlighted in orange-red is what you are seeing on your SharePoint site. What is highlighted in green is what you should see instead. There is a pattern with two of the three icons where you can see there is an equal offset to what should be shown. spcommon.png would be the first thing I would check to make sure the image is the right file and hasn't been overwritten by a site customization, for example, a theme. It is possible, but less likely, that the source code has been modified for all three image instances to show a different area of the icon image file.

spcommon marked up

 Here is the code from a working SharePoint site, for your comparison when you use a browser inspector.

<img src="/_layouts/15/images/spcommon.png?rev=44#ThemeKey=spcommon" alt="Focus on Content" style="border:0;position:absolute;left:-143px;top:-178px;">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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