I have a list and each <li>
has an icon and a text.
The image of icons is a sprite image, so I need to set the background-size
of each li
to have the size of an icon.
How can I do this with CSS?
I have a list and each <li>
has an icon and a text.
The image of icons is a sprite image, so I need to set the background-size
of each li
to have the size of an icon.
How can I do this with CSS?
For images that support text - such as lists with icons - you would be better off using CSS pseudo-elements :before or :after. This keeps your HTML clean.
For more details on this technique, check out http://css-tricks.com/.
Here is an example. Swap place your sprite on the light gray area: http://jsfiddle.net/Pf7Xs/
Is this what you were asking? Having a sprite area and the text within an
<li>
of the same size?You mostly will be using
line-height
andheight
to line up what you want. hope that helps.You need to set the height. background-repeat of the LI as well as the padding.
Here is a handy tutorial: preview.moveable.com/JM/ilovelists
You can set the background image size in CSS3 like
background-size: 32px 32px;
but that is not really cross-browser compatible and I guess that is what your concern is.Unless the sprite is well spaced out and vertical, my recommendation would be to use a bit of extra markup. For example, use markup like
and style the
span
element with appropriate height and background image sprite. Using this method, yourli
elements can have any height and only the appropriate icon would show up, despite how densely packed is your sprite.