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

83

¿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 agregar manualmente esta imagen así:

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

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

¡Gracias!

css

— Chris Conway
fuente

126

.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 el relleno y posiblemente el margen hasta que obtengas el resultado deseado. También puedes jugar con la posición de la imagen de fondo (* asentir a Tom Wright) con "background-position" o haciendo una definición completa de "background" ( enlace a w3 ).

— Jon Smock
fuente

Es posible que desee especificar la posición de la imagen. Pero por lo demás, buena decisión.

— Tom Wright

1

Probablemente pueda evitar establecer la propiedad de visualización en bloque si se asegura de que la altura de la línea sea lo suficientemente grande para ajustarse a la imagen verticalmente; de lo contrario, [posiblemente] verá que se corta y querrá convertirla en un elemento de bloque.

— Zack The Human

Puede utilizar la opción optimizada en lugar de las dos primeras líneas: background: url ('someone.jpg') no-repeat;

— Alexis Gamarra

1

Esto funciona cuando la página se muestra en la pantalla, pero la mayoría de los navegadores omiten las imágenes de fondo de manera predeterminada al imprimir, por lo que quedará con un espacio en blanco donde se supone que debe estar la imagen. ¡Debe haber una solución para esto!

— Vivian River

36

Método muy simple:

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

Funciona en todos los navegadores modernos e IE8 +.

Editar

Sin embargo, no use esto en sitios grandes. El pseudo-elemento: before es horrible en términos de rendimiento.

— tomasz86
fuente

12

Prueba algo como:

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

}

— Traingamer
fuente

pero no olvides la no repetición

— Traingamer

1

La adición también width:2em; background-size: contain;puede ser útil para limitar el tamaño de la imagen.

— Damian Green

8

Esto funciona muy bien

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

— Шууданч Зөгий
fuente

1

Sin embargo, puede explicar esto, por qué funciona. por qué su código no lo hizo, etc.

— Yaje

1

¿Debería haber algo en el url()?

— Darren Cook

@Darren Cook: no sé si estás siendo sarcástico o no, de todos modos tienes que poner allí la URL de tu imagen.

— Giovanni

3

@Giovanni ¡No es sarcasmo! Simplemente edité la respuesta para que quede más claro que no se dejó en blanco deliberadamente.

— Darren Cook

2

Para agregar el icono de fondo siempre antes del texto cuando la longitud del texto no se conoce de antemano.

.create:before{
content: "";
display: inline-block;
background: #ccc url(arrow.png) no-repeat;
width: 10px;background-size: contain;
height: 10px;
}

— Toki
fuente