Making sprites for a series of icons can be tedious and error prone. but we've done it for you for the Silk Icon set. The Silk Icon Sprite Builder creates a single image file and associated CSS to make it simple to add Silk Icons to your web page and minimize download times for end users.
Using the Sprite
The generated CSS is designed to replace 3 common HTML elements: anchor, span and input.
Replacing Anchor Tags (Links) With Icons
When not using sprites, creating an icon link looks something like this:
<a href="/save"><img src="/images/save.gif" /></a>
But this isn't search engine friendly and it shows that annoying "missing image" placeholder while the icon is downloaded. And since the image doesn't have the width or height specified, when the image does load it might cause the entire page to shift. Using the CSS sprite solves all of these issues.
<a href="/save" class="ui-silk ui-silk-disk">Save</a>
Adding icons to indicate status is as simple too. Just add a <span> element where the icon should be.
<span class="ui-silk ui-silk-accept"></span> Order Approved!
Replacing your form's submit button is just as easy.
<form action="/search"> <input type="text" name="query" /> <input type="submit" value="Search" class="ui-silk ui-silk-magnifier" /> </form>