No puede usar el texto como imagen de fondo, pero puede usar las :before
o :after
pseudo clases para colocar un carácter de texto donde lo desee, sin tener que agregar todo tipo de marcado extra desordenado.
Asegúrese de configurar position:relative
su envoltorio 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 fuente que las versiones anteriores:
- Para FontAwesome v5, versión gratuita, use:
font-family: "Font Awesome 5 Free"
- Para FontAwesome v5, versión Pro, use:
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 con el botón derecho en un ícono impresionante de fuente 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 icono utf-8, pero tenga en cuenta que puede encontrarlo en :before
).