Utilice iconos Font Awesome en CSS
Tengo algo de CSS que se parece a esto:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
Me gustaría reemplazar la imagen con un ícono de Font Awesome .
No veo de ninguna manera usar el ícono en CSS como imagen de fondo. ¿Es posible hacer esto suponiendo que las hojas de estilo/fuentes de Font Awesome se carguen antes que mi CSS?
No puedes usar texto como imagen de fondo, pero puedes usar las pseudoclases :beforeo :afterpara colocar un carácter de texto donde quieras, sin tener que agregar todo tipo de marcas adicionales desordenadas.
Asegúrese de configurar position:relativesu contenedor de texto real para que el posicionamiento funcione.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDITAR:
Font Awesome v5 utiliza otros nombres de fuentes que las versiones anteriores:
- Para FontAwesome v5, versión gratuita, utilice:
font-family: "Font Awesome 5 Free" - Para FontAwesome v5, versión Pro, utilice:
font-family: "Font Awesome 5 Pro"
Tenga en cuenta que también debe establecer la misma propiedad de peso de fuente (parece ser 900).
Otra forma de encontrar el nombre de la fuente es hacer clic derecho en un ícono de fuente increíble de muestra en su página y obtener el nombre de la fuente (de la misma manera que se puede encontrar el código del ícono utf-8, pero tenga en cuenta que puede encontrarlo en :before).
En realidad, incluso font-awesomeCSS tiene una estrategia similar para configurar los estilos de sus iconos. Si desea obtener rápidamente el icon código , verifique el non-minified font-awesome.cssarchivo y ahí están... cada fuente en su pureza.
