Font Awesome 5 - Por que mostra quadrado em vez de ícone quando usado em pseudo-elemento?
Estou tentando alterar o conteúdo de umspan com um ícone Fonte impressionante diretamente da página CSS, mas parece que não funciona corretamente.
1) Importei FA da documentação e no<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2) Meu html fica assim:
<span class='myClass'>Movies</span>
3) Agora, digamos que eu gostaria de alterar o conteúdo do período com um ícone diretamente da página CSS.
Meu CSS atualmente se parece com isso, mas não está funcionando, me dá um quadrado em vez do ícone.
.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>O engraçado é que parece que ele está trabalhando com alguns ícones. Se eu testar comcontent: '\f007'; funciona. Alguma idéia do porquê?
(E se você se pergunta por que eu quero alterar o ícone diretamente no CSS, é porque estou usando consultas de mídia para não poder adicioná-lo diretamente na página HTML)