On 7/5/13 9:07 AM, Chris Rockwell wrote:
I have been given a sprite file with lots of icons of differing sizes. In
this particular instance, I have an <li> that needs an icon on the left.
However, if the <li> is too long (character count) then I end up with
other icons showing in the background. Also, if it spans multiple lines, I
get several icons horizontally and vertically.
[...]
I think I'd tackle this by using generated content to display the sprite.
Something along these lines, perhaps:
li.sprited {
position: relative;
padding-left: width-of-sprite;
}
li.sprited:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: width-of-sprite;
height: height-of-sprite;
background: transparent url(path/to/sprite/sprite-image.svg) no-repeat
x-position y-position;
}
Substitute your own dimensions and image etc. in the above.
HTH.
--
Cordially,
David
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
