fontawesome 5 font-family ne fonctionne pas

Question

J'ai intégré fontawesome 5 dans un projet avec bootstrap 4. Lorsque je rappelle une police via css cela ne fonctionne pas. Avec fontawesome 4, le code était le suivant :

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

J'ai essayé de changer le nom de la police, mais cela ne fonctionne pas.

font-family: 'Font Awesome 5 Free'

Answer 1

Votre Unicode c'est faux 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 dans un autre cas, font-weight: 900; vous sauvera. Certaines icônes dans font awesome 5 ne fonctionnent pas sans font-weight: 900; .

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

Answer 2

Bizarrement, vous devez mettre le ' font-weight : 900 dans certaines icônes afin de les afficher.

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free'; 
  font-weight: 900; /* Fix version 5.0.9 */
}

Answer 3

Le problème se situe au niveau de la font-weight .
Pour Font Awesome 5 vous devez utiliser {font-weight:900}

Answer 4

Utilisation du fichier fontawesome-all.css : Le changement de la famille de caractères "Brands" de "Font Awesome 5 Free" à "Font Awesome 5 Brands" a réglé les problèmes que j'avais.

Je ne peux pas m'attribuer tout le mérite - j'ai réglé mon propre problème local juste avant de regarder la version CDN : https://use.fontawesome.com/releases/v5.0.6/css/all.css

Le problème a été résolu sur le CDN également.

 @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

Answer 5

L'exigence d'un poids de 900 n'est pas une bizarrerie, mais une restriction intentionnelle ajoutée par FontAwesome (puisqu'ils partagent le même unicode, mais avec un poids de police différent) afin que vous ne puissiez pas utiliser les icônes "solides" et "légères", dont la plupart ne sont disponibles que dans la version "Pro" payante.