texto - efectos hover para imagenes css

Agregar imagen a la izquierda del texto a través de css

Question

¿Cómo puedo agregar una imagen a un texto a través de css?

Tengo esto:

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

y quiero agregar una imagen de 16x16 a la izquierda de eso usando css. ¿Es esto posible o debería simplemente agregar manualmente esta imagen así:

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

Prefiero no tener que cambiar manualmente todos los lugares, por eso quería hacerlo a través de CSS.

¡Gracias!

Answer 1

Esto funciona muy bien

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

Answer 2

Método muy simple:

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

Funciona en todos los navegadores modernos e IE8 +.

Editar

No use esto en sitios grandes sin embargo. El: antes de pseudo-elemento es horrible en términos de rendimiento.

Answer 3

Pruebe algo como:

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

Answer 4

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

Juega con relleno y posiblemente margen hasta que obtengas el resultado deseado. También puede jugar con la posición de la imagen de fondo (* guiño a Tom Wright) con "posición de fondo" o haciendo una definición completa de "fondo" ( enlace a w3 ).