Question

I have an icon set that uses CSS classes to display them accordingly. Like, say, this:

<div class="icon anchor">This is some text!<br>This is some text!</div>

This will display the icon, but since the icon is a background image, the text has to be moved aside, to make room so that the text isn’t going over the image. That’s where my problem is. The text is moved aside, but all the text is moved aside. I only want what needs(probably the first line) to be moved. This is my CSS:

.icon {
    background-repeat: no-repeat;
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

Answer 1

Do it like this instead:

http://jsfiddle.net/thirtydot/8uPU5/

HTML:

<div class="icon anchor"><span>This is some text!</span><br>This is some text!</div>

CSS:

.icon {
    background-repeat: no-repeat;
}
.icon.anchor span {
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0b/Vovinam_azzurro_16x16.gif);
}