Get image from sprite and add to href

Question

I added all my badges to the sprite. Now I need to show one icon from this sprite with a link. When I add a sprite and set its background position to the link, the whole background of the link is the sprite sprite.

a{ background-image:url('sprite.png'); } .sprite_link_icon{ padding-left: 20px; background-position: -36px -10px } <a class="sprite_link_icon" href="">test link test</a> 

How to set the width and height of a sprite so that it displays only one icon?

Is this the only way to add two divs to the "a" tag? Firstly, a div with a sprite icon, width and height, and in another text?

 <a href=""> <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div> <div>test link</div> </a> 

Answer 1

You can use :before or :after to move the actual background to another (pseudo) element that exactly matches the size of one icon.

Something like that:

 .icon { /* nothing special here, just a dynamic element, maybe with a fixed height? */ } .icon:before { content: ''; display: inline-block; height: 16px; width: 16px; background: url(...) etc; margin-right: .25em; /* might not be necessary due to inline-block */ } 

Script: http://jsfiddle.net/rudiedirkx/RG3Kd/ (with the wrong sizes, because I do not have a good sprite).

Answer 2

You cannot do this when you make sprites, you must keep in mind how much the width and height of the element will be.

You can get rid of the problem when you add a span to the "a" tag and add a backgroud with a certain width and height to it. Or you can rebuild your sprite.

Answer 3

Use this code in style:

 a { background-color:#00cc00; padding-left:20px; } a span { background-color:#fff; } 

then this html:

 <a href="#"><span>test link</span></a>