html css font-awesome pseudo-element font-awesome-5

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)