web-dev-qa-db-fra.com

Impossible de charger Font Awesome

Je n'ai pas pu utiliser le libre-service et charger une police Web sur mon serveur de site Web et les autres articles Stack Overflow sur ce sujet ne m'ont pas aidé à localiser l'erreur ici.

J'obtiens un espace vide où les polices doivent apparaître.

Voici les détails:

  • https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/ est l'emplacement du fichier CSS de ma police, fontawesome-all.css

screenshot of CSS file path in an FTP browser

  • https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfonts est l'emplacement de ma police

screenshot of font location in an FTP browser

Tout d'abord , assurez-vous que je n'ai pas commis d'erreurs liées au chemin dans mon lien de feuille de style dans mon en-tête.

J'ai essayé de référencer la feuille de style CSS de la police dans mes en-têtes HTML de plusieurs manières:

En tant que lien relatif:

<link href="./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

En tant que lien absolu:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Deuxièmement , assurez-vous que mon implémentation @ font-face et les chemins indiqués sont corrects. À l'intérieur de la feuille de style de la police fontawesome-all.css est un @font-face invocation de la police:

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

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

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

Modifier: le code HTML que j'utilise pour que les polices (icônes) apparaissent sur la page est standard: par exemple <i class="fas fa-external-link-alt"></i> ainsi que l'instance du pseudo-élément:

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

Édition 2: Utilisation d'une source externe officielle pour le fichier CSS de la police, <link href="https://www.ashenglowgaming.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet"> dans l'en-tête fonctionne pour les instances en ligne de la police, comme dans l'exemple que j'ai donné ci-dessus <i class="fas fa-external-link-alt"></i>, mais pas pour l'instance de pseudo-élément

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

Dans tous les cas, je souhaite servir le fichier sur mon propre serveur, donc la liaison hors site ne me suffit pas.

Enfin, pour référence: consultez le guide d'installation officiel de Font Awesome ici

csswordpressfontsfont-awesomefont-face
3
user9353046

Outre le fichier all.css qui est requis pour le rendu des icônes, le dossier webfonts est également requis. enter image description here

C'est l'une des solutions pour ce type d'erreur.

0
kumarras