Font Awesome 5-Elegir la familia de fuentes correcta en pseudo-elementos CSS
fonts font-awesome (1)
Simplemente utilícelos todos en la misma
font-family
y su navegador hará el trabajo.
Si no lo encuentra en el primero, utilizará el segundo.
(
Varias fuentes en la propiedad Font-Family?
)
Por cierto, la
font-family
correcta es
Free
no
Solid
porque la diferencia entre
Sólido
y
Regular
es el
font-weight
la
font-weight
y ambos tienen la misma
font-family
.
Así que
no hay
Solid
y
Regular
en la familia de fuentes, solo hay
Free
y
Brands
.
También puede notar que casi todos los iconos de la versión
Solid
son gratuitos, PERO no todas las versiones
regular
son gratis.
Algunos de ellos están incluidos en el paquete PRO.
así que si el icono no se muestra
no es necesariamente
un problema de la
font-family
.
Y todas las versiones
Light
son PRO.
.icon {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}
.icon1:before {
content: "/f099";
/* TWITTER ICON */
font-weight: 400;
}
.icon2:before {
content: "/f095";
/* PHONE ICON */
font-weight: 900;
}
.icon3:before {
content: "/f095";
/* PHONE ICON */
font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>
<div class="icon3 icon"></div>
Actualmente estoy confundido al usar el ícono en pseudo-elementos CSS.
Hay 4 tipos de fuentes tipográficas para fontawesome:
Font Awesome 5 Free
,
Font Awesome 5 Solid
,
Font Awesome 5 Brands
,
Font Awesome 5 Regular
Aquí está el HTML:
<h1>Hello</h1>
Caso 1
Uso este icono: https://fontawesome.com/icons/twitter?style=brands
Como puedes ver, es un ícono de
brands
, así que la familia de
Font Awesome 5 Brands
:
Font Awesome 5 Brands
h1:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "/f099"; /* TWITTER ICON */
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
¡FUNCIONA!
Caso 2
Uso este icono: https://fontawesome.com/icons/phone?style=solid
Como puedes ver, es un ícono
solid
, así que la familia de
Font Awesome 5 Solid
:
Font Awesome 5 Solid
h1:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "/f095"; /* PHONE ICON */
font-family: "Font Awesome 5 Solid";
font-weight: 900;
}
NO FUNCIONA!
¿Qué hice mal?
¿Cómo sabemos cuándo usar la familia de fuentes correcta?