Snow: icons with css and sprites (best practice)

May 10th, 2010 by jeremychone
.ico{
	background-image: url(images/my-sprites.png);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	display:inline-block;
}

/* Sometime alignment is better with a display block and float left */
.icoFL{
	background-image: url(images/my-sprites.png);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	display:block;
	float:left;
	margin: 2px 4px 0 0;
}

/* This should be used when using the icoFL for the label on the right. */
.icoFL-lbl{
	padding-bottom: 5px;
}

/* This is an example of an icon for a document */
.icoDocument{
    background-position: 0 0;
}

/* This is the second icons. The icons are every 32px horizontally and veritically */
.icoFolder{
	background-position: -32px 0;
}

The html code would look something like that:

<span class="ico icoDocument"></span> First Doc

To use the icoFL formatting, use something like:

<span class="icoFL icoDocument"></span> <span class="icoFL-lbl">First Doc</span>

Tags:

Leave a Reply