FamFamFam Silk icons CSS sprite demo

To learn more about "CSS sprites" conception, see Sprite (computer graphics) [wikipedia].

The sprites were generated with the help of website-performance.org and are CSS3 valid.

The minified version of the CSS file of the package was processed with the YUI Compressor.

The PNG sprites are optimized with Smush.it^TM.

Global sprite overview

Sprite usage

To use the sprite, just include the CSS definition file in your HTML document:

	<link rel="stylesheet" href="path/to/src/silk-icons-sprite.css" />
	// or the minified version (light weight):
	<link rel="stylesheet" href="path/to/src/silk-icons-sprite.min.css" />

The sprite is used adding specific CSS classes to a DOM entity such as a span. Each item of the sprite is accessible by using one of the global CSS class web-icon; each item will be an empty square of 16 pixels by 16 pixels with the wanted image as background. This background is defined adding the name of the item as a CSS class. For example, to construct an item using the "print" image, the CSS class to use will be web-icon print.

A special reset class can be used to reset some basic CSS definitions for an item, such as its border (none), its margins and paddings (0).

A complete usage synopsis of the sprites could be:

    <span class="web-icon [reset] icon_name"></span>