Simple CSS Sprites Example

This is a simple example of how to use a CSS sprites for adding icons to an unordered list.

The Working Example

Document 1
Document 2
Document 3
Document 4
Document 5

The CSS Sprite Image

The CSS

This is the CSS used for this example

/* Sprite rules for #documents list */

ul#documents {
	list-style-type: none;
}
ul#documents  li {
	line-height: 35px;
}
ul#documents a {
	padding-left: 22px;
}
ul#documents li a.pdf {
	background: url('../images/sprites/icon-sprites.png') no-repeat 0 0;
}
ul#documents li a.doc {
	background: url('../images/sprites/icon-sprites.png') no-repeat 0 -22px;
}
ul#documents li a.excel {
	background: url('../images/sprites/icon-sprites.png') no-repeat 0 -48px;
}