CSSのテキストの左側に画像を追加

Question

CSSを使ってテキストに画像を追加するにはどうすればよいですか？

私はこれを持っている：

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

と私は、CSSを使用して、その左側に16×16の画像を追加したいです。これは可能ですか私はちょうど手動そうのようなこの画像を追加する必要があります

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

私はむしろ手動で私はCSSでそれをやってみたかった理由であるところのすべてを変更する必要はありませ思います。

ありがとうございました！

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 */ 
} 

希望の結果が得られるまで、余白と余白を入れて遊んでください。また、バックグラウンドイメージの位置（「トムライト」へのノード）を「背景位置」で再生したり、「背景」（link to w3）の完全な定義をして再生することもできます。すべての近代的なブラウザとIE8 +で

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

作品：

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

} 

Answer 2

のようなものを試してみてください。

編集

しかし大規模なサイトでこれを使用しないでください。 ：before擬似要素は、パフォーマンスの面で恐ろしいです。

Answer 3

非常に簡単な方法：

Answer 4

これは

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