We’ve all come across the issue of efficiency when we’re slicing and coding a website. One very easy way to save on load time and pre-load any images for hover affects is to create a css sprite. Rather than having about 50 different 16×16 .png icons in an images folder, a css sprite throws all of those icons into one larger .png file. With all of these icons in one file, the browser only has to load one image to have your entire icon library pre-loaded and ready for use. The only work you have to do is space out your icons and specify their location in your stylesheet.

Creating the Sprite Image

For the example in this article I am going to be converting an icon set into a sprite. I will be using one of my favorite icon packs Nixus for this example. So lets get started by first figuring out how big our image needs to be. So there are 60 icons total all at 32×32 pixels width and height. In my image I will be lining up the icons in a 6 by 10 column system. So for the width I will calculate 6 * 32 which is 192, and the height is 10 * 32 which is 320. Therefore the size of my image will be 192 pixels wide by 320 pixels tall.

So fire up Photoshop and create a new document sized at what we specified for this example, 192 pixels by 320 pixels. Once we have our document, create a grid to place the icons in. To do this use the rectangular marquee tool and specify the size to 32 pixels by 32 pixels. Then just line up your marquee and drag the guides out into place. You should have a grid that looks similar to the image to the right, however this will vary for every sprite by means of icon/image and of course document sizing. You also might want to turn on snap to help you line up the guides.

Ok now that we have our grid setup, go ahead and open all of your icons in Photoshop and drag them all into your sprite image. Now comes the tedious step of aligning each sprite within the confines of the grid. This is very important, you do not want any icons to bleed outside of their designated 32×32 area or else it will show when you define that image in the css. Once you have all of your icons lined up you can go ahead and save your image as a .png for transparency or a .jpg with a solid background that fits the background of your site (this will be a smaller file).

Now let’s write the CSS

The css is very simple and straightforward for a css sprite. All we are doing is defining a generic .icon class to be applied to any icons we wish to display. Now we could also round up all of our individual classes here and give then the same definition and save ourself the trouble of including 2 classes per element but I decided against that option due to there being so many icons in this case. I would have probably taken that route if I had under 10 icons. The final step is just going through and creating the class for every icon, with the unique position of it in the sprite.png image. notice that we are incrementing negatively by 32 pixels here. Now note that another great use here is for the hover image effect of let’s say an image based navigation – we could easily apply the same basic principle here to pre-load the hover effect.

/*Generic .icon class to be applied to all icon uses*/
.icon, .icons li {display: block;width: 32px;height: 32px;margin: 0;padding: 0;background-image: url("sprite.png");background-repeat: no-repeat;text-indent: -9999px;}
.icons li {list-style-type: none;}
/*First Row*/
.add-icon {background-position: 0 0;}
.email-icon {background-position: -32px 0;}
.alert-icon {background-position: -64px 0;}
.announcement-icon {background-position: -96px 0;}
.left-icon {background-position: -128px 0;}
.emptybin-icon {background-position: -160px 0;}
/*Second Row*/
.fullbin-icon {background-position: 0 -32px;}
.download-icon {background-position: -32px -32px;}
.nuclear-icon {background-position: -64px -32px;}
.calendar-icon {background-position: -96px -32px;}
.disc-icon {background-position: -128px -32px;}
.chat-icon {background-position: -160px -32px;}
/*Third Row*/
.clock-icon {background-position: 0 -64px;}
.x-icon {background-position: -32px -64px;}
.monitor-icon {background-position: -64px -64px;}
.phone-icon {background-position: -96px -64px;}
.server-icon {background-position: -128px -64px;}
.delete-icon {background-position: -160px -64px;}
/*Fourth Row*/
.down-icon {background-position: 0 -96px;}
.write-icon {background-position: -32px -96px;}
.heart-icon {background-position: -64px -96px;}
.flag-icon {background-position: -96px -96px;}
.folderclosed-icon {background-position: -128px -96px;}
.folderopen-icon {background-position: -160px -96px;}
/*Fifth Row*/
.right-icon {background-position: 0 -128px;}
.help-icon {background-position: -32px -128px;}
.home-icon {background-position: -64px -128px;}
.info-icon {background-position: -96px -128px;}
.key-icon {background-position: -128px -128px;}
.lock-icon {background-position: -160px -128px;}
/*Sixth Row*/
.stamp-icon {background-position: 0 -160px;}
.mail-icon {background-position: -32px -160px;}
.music-icon {background-position: -64px -160px;}
.switch-icon {background-position: -96px -160px;}
.clipboard-icon {background-position: -128px -160px;}
.picture-icon {background-position: -160px -160px;}
/*Seventh Row*/
.briefcase-icon {background-position: 0 -192px;}
.redo-icon {background-position: -32px -192px;}
.refresh-icon {background-position: -64px -192px;}
.rss-icon {background-position: -96px -192px;}
.search-icon {background-position: -128px -192px;}
.shield-icon {background-position: -160px -192px;}
/*Eigth Row*/
.speaker-icon {background-position: 0 -224px;}
.measure-icon {background-position: -32px -224px;}
.piegraph-icon {background-position: -64px -224px;}
.minus-icon {background-position: -96px -224px;}
.gear-icon {background-position: -128px -224px;}
.tag-icon {background-position: -160px -224px;}
/*Ninth Row*/
.stack-icon {background-position: 0 -256px;}
.bulb-icon {background-position: -32px -256px;}
.tools-icon {background-position: -64px -256px;}
.board-icon {background-position: -96px -256px;}
.undo-icon {background-position: -128px -256px;}
.up-icon {background-position: -160px -256px;}
/*Tenth Row*/
.user-icon {background-position: 0 -288px;}
.globe-icon {background-position: -32px -288px;}
.app-icon {background-position: -64px -288px;}
.hat-icon {background-position: -96px -288px;}
.pencil-icon {background-position: -128px -288px;}
.floppy-icon {background-position: -160px -288px;}

Example Usage

  <li class="add-icon"></li>
  <li class="email-icon"></li>
  <li class="alert-icon"></li>
  <li class="announcement-icon"></li>
  <li class="left-icon"></li>
  <li class="emptybin-icon"></li>



 

Conclusion

About the Author