Add sprite icon to a label . Is there a way to set width / height just for the sprite and a second w/h to the label?

Question

This is probably a newbie question, but is it possible to add a sprite icon to a label with text?

ex:

<label class="icon">labeltext</label>

<style>
 .icon {
    width: 30px
    height: 30px;
    background: url("icon.png") no-repeat scroll 0 0 transparent;
 }
</style>

When I set the width to 30px, the whole text isn't showing. Is there a way to have a sprite icon and a text inside a div / label / span ?

My real code looks more like this

<span class="additional-background">
    <span>text text text text</span>
</span>

If i set the width / height on the additonal-background where the sprite-icon is you can not see the text inside the text span. And if I set width on text span I can't manage to make a click-event on the "additional-background".

Additional I need to manage to have a click event on the icon, and not the text

Answer 1

Try this:

HTML

<label class="icon">labeltext</label>

CSS

.icon {
  display: inline-block;
  line-height: 30px;
  padding-left: 30px;
  background: url("icon.png") no-repeat scroll 0 0 transparent;
}

Answer 2

To achieve this you have to set the background-position of images you are using as icon in class="additional-background" and give padding to the inside span where the text resides.

You can put the position of background image here itself like

e.g: background: url("icon.png") no-repeat scroll 10px 10px transparent;