web-dev-qa-db-fra.com

fontawesome 5 font-family pas de travail

J'ai intégré fontawesome 5 dans un projet avec bootstrap 4. Quand je rappelle une police via css, cela ne fonctionne pas .

#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 ça ne marche pas

font-family: 'Font Awesome 5 Free'
cssfontsfont-awesome-5
28
Carmelo Valenti

Votre Unicode est erroné 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>

Sinon, font-weight: 900; vous sauvera. Certaines icônes de la police awesome 5 ne fonctionnent pas sans font-weight: 900;.

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

Bizarrement, vous devez mettre le ' font-weight: 900 ' dans certaines icônes pour qu'il les affiche.

#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 */
}
54
Lenin Zapata

Le problème est dans le font-weight.
Pour Font Awesome 5, vous devez utiliser {font-weight:900}

10
www.admin.ge

Utilisation du fichier fontawesome-all.css: Le remplacement de la police de caractères "Marques" de "Font Awesome 5 Free" par "Font Awesome 5 Brands" a résolu les problèmes que je rencontrais. 

Je ne peux pas accepter tout le crédit. J'ai résolu mon problème local avant de regarder la version de CDN: https://use.fontawesome.com/releases/v5.0.6/css/all.css

Ils ont également réglé le problème sur le CDN.

 @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"); }

6
JTStuedle

Depuis FontAwesome 5, vous devez activer une nouvelle option "searchPseudoElements" pour utiliser les icônes FontAwesome de cette façon: 

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Voir aussi cette question: Font awesome 5 sur des pseudo-éléments et la nouvelle API Font Awesome: https://fontawesome.com/how-to-use/font-awesome-api

De plus, changez la famille de polices dans votre code CSS en 

font-family: "Font Awesome 5 Regular";
3
Mesa

Exiger un poids de 900 n'est pas une bizarrerie, mais une restriction intentionnelle ajoutée par FontAwesome (car ils partagent le même unicode mais juste un poids de police différent) afin que vous ne fassiez pas votre chemin en utilisant les icônes "solide" et "léger", la plupart des qui ne sont disponibles que dans la version "Pro" payante.

3
user3006765

Je ne voulais pas utiliser la version 'all', j'ai donc cherché dans le fichier 'fontawesome-all.min.css' (précédemment inclus dans l'en-tête) la balise 'family' et j'ai trouvé à la fin une déclaration @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

Donc, dans la feuille de style d'un élément où je voulais utiliser le codecontent: "\f0c8";, j'ai ajouté (ou changé en) font-family: Font Awesome\ 5 Free; et cela a fonctionné.

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

J'ai trouvé une solution.

  • Intégrer fontawesome-all.css

  • À la fin du fichier Recherchez le deuxième @ font-face et remplacez

    font-family: 'Font Awesome 5 Free';

Avec

font-family: 'Font Awesome 5 FreeR';

Et remplace:

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

Avec

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

npm i --save @ fortawesome/fontawesome-free

Mes Sccs:

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

Cela a bien fonctionné pour moi!

0
Tan Nguyen

la solution consiste à l'appeler comme une police normale:

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

Si vous utilisez SVG avec JavaScript vous devez l'activer car il est désactivé par défaut. Utilisation 

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

dans votre balise de script.

0
Juri