Ajouter une image à gauche du texte via css

Question

Comment puis-je ajouter une image à un texte via css?

J'ai ça:

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

et je veux ajouter une image 16x16 à la gauche de celle-ci en utilisant CSS. Est-ce possible ou devrais-je simplement ajouter manuellement cette image comme suit:

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

Je préférerais ne pas avoir à modifier manuellement tous les lieux, c'est pourquoi je voulais le faire via css.

Merci!

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

Jouez avec le rembourrage et éventuellement la marge jusqu'à obtenir le résultat souhaité. Vous pouvez également jouer avec la position de l’arrière-plan (* à Tom Wright) avec "background-position" ou en définissant complètement la définition de "background" ( lien vers w3 ).

Answer 2

Méthode très simple:

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

Fonctionne dans tous les navigateurs modernes et IE8 +.

modifier

Ne l'utilisez pas sur les grands sites cependant. Le pseudo-élément: before est horrible en termes de performances.

Answer 3

Essayez quelque chose comme:

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

}
 

Answer 4

Cela fonctionne très bien

``