html - Font Awesome 5 en pseudo elementos muestra cuadrado en lugar de icono
css font-awesome (1)
Lea esto si está utilizando la versión JS + SVG: el reemplazo de Font Awesome 5 en la etiqueta <li> muestra un cuadrado vacío
Debe especificar
font-weight:900
(o cualquier valor mayor que
600
, en
bold
o en
bold
) para este.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: ''Font Awesome 5 Free'';
content: "/f008";
visibility: visible;
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class=''myClass''>Movies</span>
La versión
regular
del icono, definida por el
font-weight
predeterminado de la
font-weight
, es PRO, por lo que mostrará un cuadrado vacío.
Lo que necesitas es la versión
solid
:
https://fontawesome.com/icons/film?style=solid
¿Por qué está funcionando el otro ícono?
Debido a que el
/f007
es este ícono:
https://fontawesome.com/icons/user?style=regular
y, como puede ver, el
regular
no es PRO y está incluido en el paquete gratuito, por lo que no necesita especificar un
font-weight
Solo necesita especificarlo cuando desee mostrar la versión
solid
.
.myClass::after {
font-family: ''Font Awesome 5 Free'';
content: "/f007";
visibility: visible;
font-weight: 900;
}
.myClass-1::after {
font-family: ''Font Awesome 5 Free'';
content: "/f007";
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class=''myClass''>Solid </span>
<br>
<span class=''myClass-1''>Regular </span>
Como nota al margen, todas las versiones
light
son PRO, por lo que no hay
font-weight
de
font-weight
para ellas en el paquete gratuito.
Puede consultar la documentación para obtener más detalles: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Preguntas relacionadas
El reemplazo de Font Awesome 5 en la etiqueta <li> muestra un cuadrado vacío
Fontawesome 5 unicode
Font Awesome 5, ¿por qué no se muestra el contenido de CSS?
Estoy tratando de cambiar el contenido de un
span
con un icono de Font Awesome directamente desde la página CSS, pero parece que no puedo hacer que funcione correctamente.
1) He importado FA de la documentación y en el
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2) Mi HTML se ve así:
<span class=''myClass''>Movies</span>
3) Digamos ahora que me gustaría cambiar el contenido del lapso con un icono directamente desde la página CSS.
Mi CSS actualmente se ve así, pero no funciona, me da un cuadrado en lugar del icono.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: ''Font Awesome 5 Free'';
content: ''/f008'';
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class=''myClass''>Movies</span>
Lo curioso es que parece que funciona con algunos iconos.
Si
content: ''/f007'';
con
content: ''/f007'';
funciona.
¿Alguna idea de por qué?
(Y si se pregunta por qué quiero cambiar el ícono directamente en el CSS, es porque estoy usando consultas de medios, por lo que no puedo agregarlo directamente en la página HTML)