Font Awesome 5 en pseudoelementos muestra un cuadrado en lugar de un icono
Estoy intentando cambiar el contenido de un spanicono de Font Awesome directamente desde la página CSS, pero parece que no puedo hacerlo funcionar 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 intervalo con un ícono directamente desde la página CSS.
Mi CSS actualmente se ve así pero no funciona, me muestra un cuadrado en lugar del ícono.
.myClass {
font-size:25px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'></span>Lo curioso es que parece que está funcionando con algunos íconos. Si lo pruebo content: '\f007';funciona. ¿Alguna idea de por qué?
(Y si te preguntas 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)
Si está utilizando la versión JS+SVG, lea esto: Font Awesome 5 muestra un cuadrado vacío cuando usa la versión JS+SVG
Necesitas agregar
font-weight:900
.myClass {
font-size:45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>La regularversión del ícono, definida por defecto font-weight, es PRO por lo que mostrará un cuadrado vacío. Lo que necesitas es la solidversión:
https://fontawesome.com/icons/film?style=solid
¿Por qué funciona el otro ícono?
Porque \f007es este ícono: https://fontawesome.com/icons/user?style=regular y, como puede ver, regularno es PRO y está incluido en el paquete gratuito, por lo que no necesita especificar un archivo font-weight. Sólo necesitas especificarlo cuando quieras mostrar la solidversión.
Mostrar fragmento de código
Como nota al margen, todas las versiones lighty duotoneestán incluidas en el paquete Pro, por lo que siempre mostrarán un cuadrado vacío sin importar el font-weightuso.
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
Font Awesome 5 muestra un cuadrado vacío cuando se usa la versión JS+SVG
Fuente Awesome 5 unicode
Font Awesome 5, ¿por qué no se muestra el contenido CSS?
de tu comentario:
Genial, gracias por la explicación! ¿Sabes qué peso de fuente necesitaría usar si la versión ligera hubiera sido gratuita?
Pruebe text-strokecon un color transparente para obtener un render más fino:
.myClass {
font-size: 45px;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
-webkit-text-stroke;
transparent 0.2em;
}
.myClass+.myClass::after {
-webkit-text-stroke: white 0.02em;
}
.bis {
font-size: 4rem;
color: blue
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
<span class='myClass'></span>
<span class='myClass bis '></span>
<u>
<span class='myClass bis '></span></u>