Font Awesome 5: ¿por qué muestra un cuadrado en lugar de un icono cuando se usa en un pseudo elemento?

Question

Apr 10, 2018, 03:26 PM

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

Font Awesome 5: ¿por qué muestra un cuadrado en lugar de un icono cuando se usa en un pseudo elemento?

Estoy tratando de cambiar el contenido de unspan con un icono de Font Awesome directamente desde la página CSS, pero parece que no puede 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 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 pruebo concontent: '\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)