font awesome - font - Fuente impresionante 5 en pseudo elementos
font awesome spinner animation (4)
Creo que está funcionando bien así:
.class:before{
font-family: ''Font Awesome 5 Free'';
font-weight: 900;
}
En fuente impresionante 4, podría aplicar fácilmente un icono a un elemento: before /: after utilizando CSS.
¿Es lo mismo posible con la nueva fuente impresionante 5 JS / SVG implementación? Por lo que puedo ver, esto requiere que la etiqueta relevante exista en html, lo que no siempre es práctico, por ejemplo, tiene un CMS y desea aplicar un icono a todos los elementos de contenido creado por el usuario <li>
Sé que en FA5 aún puede usar el antiguo css / webfonts pero sería bueno si la misma funcionalidad estuviera disponible en el método recomendado de uso de JS
Especificar el font-weight adecuado parece ser clave para que algunos de los símbolos se muestren correctamente (y no "□□□" en su lugar).
font-weight tiene que ser:
-
400para símbolosRegularyBrands -
900para símbolosSolid
Es decir, si usa Font-Awesome con CSS + Webfonts, una solución solo para CSS es:
@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */
/* ... */
.class:before {
/* >> Symbol you want to use: */
content: "/f16c";
/* >> Name of the FA free font (mandatory)
- ''Font Awesome 5 Free'' for Regular and Solid symbols;
- ''Font Awesome 5 Brand'' for Brands symbols. */
font-family: ''Font Awesome 5 Free'';
/* >> Weight of the font (mandatory)
- 400 for Regular and Brands symbols;
- 900 for Solid symbols. */
font-weight: 900;
/* >> Optional styling: */
display: inline-block;
/* ... */
}
Necesitas habilitarlo (está deshabilitado por defecto).
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
Css:
.class:before{
display: none;
content: "/f16c";
font-family: "Font Awesome 5 Brands";
}
Otros tipos: Font Awesome 5 + Solid o Regular o Light o Brands
Tengo 5 para trabajar usando
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
en <head> y
:before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
content: "/f167";
}
en mi css