Para cosas como esta, está SVG.
No tiene sentido que utilices una imagen externa cuando puedes ahorrarte esa solicitud HTTP y además hacerlo más mantenible.
MARCADO:
Primero definimos nuestra estrella utilizando la marca <path>
:
<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
Es importante que utilices la variable de CSS currentColor
en el atributo fill
de <path>
para poder cambiar el color de tu icono con la propiedad color
en CSS.
Ya que tenemos nuestra estrella, la envolveremos en la marca <symbol>
y le daremos un id
para poder utilizarla en unos pasos más adelante. Puedes agregar un título para ayudar en temas de accesibilidad. (Info sobre viewBox aquí)
<symbol id="iconoEstrella" viewBox="0 0 32 32">
<title>Estrella</title>
<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</symbol>
Después, haremos nuestra hoja de sprites para utilizarla como contenedor si quisiéramos agregar más iconos. Le daremos un id
para ocultar el elemento en CSS por cuestiones de que en algunos exploradores muestra un espacio en blanco no deseado.
<svg id="spriteSheet">
<symbol id="iconoEstrella" viewBox="0 0 32 32">
<title>Estrella</title>
<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</symbol>
</svg>
Ya que tenemos nuestro marcado de SVG, podemos pasar a utilizarlo con la etiqueta <use>
de la siguiente manera:
<svg class="icono icono--estrella">
<use xlink:href="#iconoEstrella"></use>
</svg>
Aquí le daremos una clase general de nivel bloque y un modificador. Dentro de la etiqueta <use>
referenciamos nuestro símbolo llamando su id
.
Cada vez que quieras utilizar este icono simplemente pegas este pedazo de código.
ESTILO:
¿Recuerdas las clases que definimos anteriormente en nuestro <svg>
?
icono icono--estrella
Éstas nos ayudarán a darle estilo a nuestro elemento.
.icono {
display: inline-block;
width: 1em;
height: 1em;
}
.icono--estrella {
font-size: 4em; /* Este es el tamaño del icono */
color: lightblue; /* Este es el color del icono*/
}
Y simplemente ocultamos nuestra hoja de sprites.
#spriteSheet {
display: none;
}
Y listo!
FRAGMENTO DE CÓDIGO:
#spriteSheet {
display: none;
}
.icono {
display: inline-block;
width: 1em;
height: 1em;
}
.icono--estrella {
font-size: 4em;
color: lightblue;
}
.icono--estrella:nth-child(2) {
color: red;
}
.icono--estrella:nth-child(3) {
color: green;
}
.icono--estrella:nth-child(4) {
color: yellow;
}
<svg class="icono icono--estrella">
<use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
<use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
<use xlink:href="#iconoEstrella"></use>
</svg>
<svg class="icono icono--estrella">
<use xlink:href="#iconoEstrella"></use>
</svg>
<svg id="spriteSheet">
<symbol id="iconoEstrella" viewBox="0 0 32 32">
<title>Estrella</title>
<path fill="currentColor" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</symbol>
</svg>
Más sobre esta técnica aquí.