Add image to the left of text via css

Question

How to add image to text via css?

I have it:

<span class="create">Create something</span> 

and I want to add a 16x16 image to its left using css. Is this possible, or will I just manually add this image as follows:

 <span class="create"><img src="somewhere"/>Create something</span> 

I would not have to manually change all the places, so I wanted to do this via css.

thank!

Answer 1

 .create { background-image: url('somewhere.jpg'); background-repeat: no-repeat; padding-left: 30px; /* width of the image plus a little extra padding */ display: block; /* may not need this, but I've found I do */ } 

Play with indentation and, possibly, margins, until you get the desired result. You can also play with the background image position (* nod to Tom Wright) with the "background position" or with the full definition of "background" ( link to w3 ).

Answer 2

A very simple method:

 .create:before { content: url(image.png); } 

Works in all modern browsers and IE8 +.

Edit

Do not use this on large sites.: Before a pseudo-element is terrible in terms of performance.

Answer 3

Try something like:

 .create { margin: 0px; padding-left: 20px; background-image: url('yourpic.gif'); background-repeat: no-repeat; } 

Answer 4

That works great

 .create:before{ content: ""; display: block; background: url('somewhere.jpg') no-repeat; width: 25px; height: 25px; float: left; }