SharePoint 2013 how to CSS Image Sprites spcommon.png and custom

0.md

SharePoint 2013 how to CSS Image Sprites: spcommon.png and custom

SharePoint 2013 layouts come with a common image sprite called spcommon.png. We can access this image via CSS sprite with positioning or background technique and reuse standard layout icons in web pages.

The breakdown of css instructions for spcommon.png is documented here: http://ericoverfield.com/sharepoint-2013-spcommon-png-sprite-breakdown/

Basics:

1. Build a custom CSS file using the image sprite technique
2. Upload the custom CSS into the asset folder
3. Make sure the web page embeds a reference to the custom CSS (custom master pages, snippet web parts)
4. Use custom classes as required throughout span element

custom-spcommon.css

/* css example with custom class */
/* img tag technique */

.custom-backtotop-iconouter {
outline: none;
display: inline-block;
height: 25px; /* dimension of image */
width: 28px; /* dimension of image */
position: relative;
overflow: hidden;
text-align: center;
margin-left: -3px;
}

.custom-backtotop-icon {
left: -97px; /* position in the sprite image (negative) */
top: -30px; /* position in the sprite image (negative) */
position: absolute;
}

/* background technique */

.icon {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}

.icon-top {
width: 28px;
height: 25px;
background: url('/_layouts/15/images/spcommon.png?rev=23') no-repeat -97px -30px;
}

.icon-info-white {
width: 18px;
height: 16px;
background: url('/_layouts/15/images/spcommon.png?rev=23') no-repeat -161px -178px;
}

snippet_csslink.html

<!-- example of a custom CSS reference -->

<link type="text/css" rel="stylesheet" href="/sitecollection/site/SiteAssets/common/css/custom-spcommon.css"/>

snippet_spriteicons.html

<!-- html snippet displaying the back to top icon, this uses the img tag -->
<a href="#top">
  <span tabindex="-1" class="custom-backtotop-iconouter">
    <img title="Back to Top" class="custom-backtotop-icon" alt="Back to Top" src="/_layouts/15/images/spcommon.png?rev=23"/>
  </span>
</a>

<!-- this snippet is simpler because uses just a span tag referencing the wanted class 
 the css is simpler too -->
<span class="icon icon-top"></span>
 
<!-- info icon -->
<span class="icon icon-info-white"></span>