html - use - Fonte impressionante 5 em pseudo-elementos mostra quadrado em vez de ícone



install fa icons (1)

Eu estou tentando alterar o conteúdo de um span com um ícone de Font Awesome diretamente da página CSS, mas parece que não pode fazê-lo funcionar corretamente.

1) Eu 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 se parece com isso:

<span class='myClass'>Movies</span>

3) Vamos agora dizer que eu gostaria de alterar o conteúdo do span com um ícone diretamente da página CSS.

Meu css atualmente se parece com isso, mas não está funcionando, ele 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 está trabalhando com alguns ícones. Se eu testar com content: '\f007'; funciona. Alguma ideia do porquê?

(E se você se perguntar por que eu quero mudar o ícone diretamente no CSS, é porque eu estou usando as consultas de mídia, então não posso adicioná-lo diretamente na página HTML)


Leia isto se você estiver usando a versão JS + SVG: Font Awesome 5 substituto na tag <li> mostra quadrado vazio

Você precisa especificar font-weight:900 (ou qualquer valor maior que 600 , bold ou bolder ) 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>

A versão regular do ícone, definida pelo font-weight padrão da font-weight , é PRO, então mostrará um quadrado vazio. O que você precisa é da versão solid :

https://fontawesome.com/icons/film?style=solid

Por que o outro ícone está funcionando?

Porque o \f007 é este ícone: https://fontawesome.com/icons/user?style=regular e como você pode ver, o regular não é PRO e está incluído no pacote gratuito, então você não precisa especificar um font-weight . Você só precisa especificá-lo quando quiser mostrar a versão 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 uma nota lateral, toda a versão light é PRO, então não há font-weight para eles no pacote grátis.

Você pode verificar a documentação para obter mais detalhes: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Perguntas relacionadas

Font Awesome 5 substituto na tag <li> mostra quadrado vazio

Fontawesome 5 unicode

Fonte impressionante 5, por que o conteúdo css não está mostrando?





font-awesome-5