Css ile metin görüntünün soluna resim ekle

Question

Bazı yazılara css ile nasıl resim ekleyebilirim?

ben hallederim:

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

ve ben css kullanarak o solundaki 16x16 görüntü eklemek istiyorum. Bu mümkün mü yoksa ben sadece elle şöyle bu resim eklemek gerekir:

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

Doğrusu elle ben css aracılığıyla bunu yapmak istedim yüzden tüm yerleri değiştirmek istemem.

Teşekkürler!

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

İstediğiniz sonucu elde edene kadar dolgu ve muhtemelen kenar boşluğu ile oynayın. Ayrıca arka plan görüntüsünün (“Tom Wright'a * nod”) “arka plan konumu” ile veya “arka plan” (link to w3) tanımını yaparak oynayabilirsiniz. tüm modern tarayıcılar ve IE8 +

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

Çalışır:

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

} 

Answer 2

gibi bir şey deneyin.

Düzenleme

bu olsa büyük sitelerde kullanmayın. : Pseudo-elementten önce performans açısından korkunç.

Answer 3

Çok basit yöntemle:

Answer 4

Bu

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