css - pro - font awesome mdn



família de fontes fontawesome 5 não funciona (10)

Como não queria usar a versão 'all', procurei no fontawesome-all.min.css ' fontawesome-all.min.css ' (anteriormente incluído no cabeçalho) a tag 'family' e encontrei no final uma declaração @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

Então, na folha de estilo de um elemento em que eu queria usar o content: "\f0c8"; código, eu adicionei (ou mudei para) font-family: Font Awesome\ 5 Free; e funcionou.

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}

Eu fontawesome 5 em um projeto com o bootstrap 4. Quando me lembro de uma fonte via css ela não funciona. com o fontawesome 4, o código era o seguinte:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

Tentei alterar o nome da fonte, mas não funciona

font-family: 'Font Awesome 5 Free'


Estranhamente, você precisa incluir a família da fonte e o peso da fonte para que ela funcione. Aqui está o que funcionou para mim:

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

A partir daí, você pode começar a adicionar os estilos que desejar.

Digamos:

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 100px;
    color: white;
    z-index: 1;
    position: absolute;
}

Eu espero que isso ajude.


Eu encontrei uma solução.

  • Integrar fontawesome-all.css
  • No final do arquivo, procure o segundo @ font-face e substitua

    família de fontes: 'Font Awesome 5 Free';

Com

font-family: 'Font Awesome 5 FreeR';

E substitua:

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

Com

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }

Eu tive que definir searchPseudoElements como true para fazê-lo funcionar no Angular5.

import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';

Exigir peso de 900 não é uma esquisitice, mas uma restrição intencional adicionada pelo FontAwesome (já que eles compartilham o mesmo unicode, mas apenas um peso de fonte diferente), para que você não esteja abrindo caminho usando os ícones 'sólido' e 'leve', a maioria dos que estão disponíveis apenas na versão paga 'Pro'.


Se você estiver usando SVG com JavaScript, precisará habilitá-lo porque está desativado por padrão. Usar

<script data-search-pseudo-elements ... >

dentro da sua tag de script.


Seu Unicode está errado f107

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

Ou, em outro caso, font-weight: 900; vai te salvar. Alguns ícones na fonte impressionante 5 não funcionam sem font-weight: 900; .

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

a solução é chamá-lo como fonte normal:

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}





font-awesome-5