SharePoint 2010: Where are the Icons?

 

This article might be titled… Fun with SharePoint 2010 branding. I was trying to find the icon used as the divider in the SharePoint 2010 Site Title / Crumb Trail. It’s the little triangle below:

 

SharePoint 2010 Icons

So I was browsing the source HTML looking for the icon and ran across this image tag:

<img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" />

So my image must be fgimg.png, but it was not just he “” symbol I was looking for. Scroll down to the end of this page to see the image and you will find that it’s not a single image, but collection of images in a single file. The image I was looking for was 585 pixels down in the file!

Actually, this is a kind of  cool trick. On the first reference the single file is downloaded and cached. When the next icon is needed, it’s already in the browser’s cache.

So how you get a single icon from the file? Based on how SharePoint does it, there are two parts:

1. In the IMG tag set a negative number for the “top” style to skip the first set of icons:
      “top:-585px !important;”
   
2. Wrap the image in a SPAN and crop out just the part you want by setting a height and width:
      “<span style="height:11px;width:11px;”

<span style="height:11px;width:11px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" /></span>

So, they build a box 11px by 11px and displayed fgimg.png in it, but offset by 585 pixels.

 

Sprites?

The correct term for these kinds of files are CSS Sprites.

Here’s two nice articles on CSS Sprites, and the second one has a huge number of examples:

http://www.thewebsqueeze.com/web-design-articles/an-introduction-to-css-sprites.html

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

 

SharePoint Sprites

Here’s a few of the sprite files I’ve found:

These can all be found in:

    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES

Or from you browser:

    http://yourserver/sites/yoursite/_layouts/images/filename.png

 

How do you build your own sprite files?

By hand of course! (why not?)  Or, do a little web searching and you can find tools to build them for you.

 

fgimg.png

Sample SharePoint sprite: (the black background is the “transparent color” that is ignored when image is displayed.

 

.