web-dev-qa-db-fra.com

FontAwesome ne parvient pas à charger les polices localement et dans l'application électronique

J'ai téléchargé FontAwesome à l'aide de npm puis copié le fichier css et les polices dans les bons dossiers du répertoire racine de mon application électronique à l'aide de la tâche de copie grunts. 

Jusqu'ici tout va bien. Tout est là où il est censé être.

Désormais, lorsque je fais référence à FontAwesome dans mon application, les icônes ne sont pas chargées. Voici les erreurs que je reçois dans la console:

Impossible de décoder la police téléchargée: 
file: ///path/to/fonts/fontawesome-webfont.woff2? v = 4.4.0 
Erreur d'analyse OTS: Impossible de convertir la police WOFF 2.0 en SFNT 

Impossible de décoder la police téléchargée: 
fichier: ////path/to/fonts/fontawesome-webfont.woff? v = 4.4.0
Erreur d'analyse OTS: taille de fichier incorrecte dans l'en-tête WOFF 

Impossible de décoder la police téléchargée:
fichier: ////path/to/fonts/fontawesome-webfont.ttf? v = 4.4.0
Erreur d'analyse OTS: entrySelector incorrect pour le répertoire de la table

J'ai déjà essayé de modifier le fichier CSS de FontAwesome en supprimant tous les paramètres de version, mais cela ne semble pas être le problème. Les problèmes surviennent en démarrant l'application via electron . et en affichant le fichier html dans le navigateur. 

METTRE À JOUR

Pour répondre à quelques commentaires:

  • Ce problème se produit dans electron ainsi que dans le navigateur (testé en chrome et firefox)
  • J'utilise les dernières versions de FontAwesome (4.4.0) et Electron (0.32.1) (nouvelle installation via npm)
  • css est chargé comme: <link rel="stylesheet" type="text/css" href="css/font-awesome.css" >
javascriptcssgruntjsfont-awesomeelectron
36
nozzleman

Le problème était dans mon dossier grunt. J'ai essayé de reproduire le problème en téléchargeant simplement toutes les dépendances manuellement sur les sites Web de leurs fournisseurs et les ai placées dans le dossier de scripts correspondant à mon projet. 

Je suis passé à avaler maintenant et cela fonctionne toujours. Aucune idée de ce que je faisais mal avec Grunt cependant ...

2
nozzleman

J'ai eu un problème similaire (peut-être que cette réponse aidera quelqu'un). J'utilise Maven pour construire des projets (Java + JS). Maven Filter Plugin a corrompu les fichiers de polices binaires. Je devais ajouter comprend et exclut:

    <resources>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>true</filtering>
            <excludes>
                <exclude>**/*.woff</exclude>
                <exclude>**/*.ttf</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>false</filtering>
            <includes>
                <include>**/*.woff</include>
                <include>**/*.ttf</include>
            </includes>
        </resource>
    </resources>
59
Azee

Dans ma situation, Git traitait le fichier comme un fichier texte et déconnait ses "fins de ligne". Cela corrompait le fichier.

Ajuster .gitconfig pour reconnaître les fichiers * .woff en tant que binaires, puis supprimer le fichier et ajouter une nouvelle copie depuis https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome- webfont.woff a résolu le problème pour moi.

27
user892592

Pour certaines personnes qui se déploient sur IIS, l'ajouter au fichier web.config (le fichier principal, pas celui du répertoire du contrôleur) peut s'avérer utile.

<system.webServer>
   <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
</system.webServer>

5
Stephen C

J'ai rencontré le même problème, en utilisant API Gateway pour servir des fichiers de polices statiques sur Amazon S3.

Je l'ai corrigé en ajoutant */* en tant que types de supports binaires sur la console AWS.

Plus d'informations sur la gestion des types de supports binaires sur https://docs.aws.Amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html

4
piercus

essayez ce qui suit, appelez la fonte-face comme suit au début de votre fichier CSS. 

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.0.3);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3) format('embedded-opentype'), url(../fonts/fontawesome-webfont.woff?v=4.0.3) format('woff'), url(../fonts/fontawesome-webfont.ttf?v=4.0.3) format('truetype'), url(../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular) format('svg');
    font-weight: 400;
    font-style: normal
}
1
Richard Zilahi

Si vous utilisez la variable bower, vous pouvez réécrire votre font-face en:

@font-face {
  font-family: FontAwesome;
  src: url(font-awesome/fonts/fontawesome-webfont.eot);
  src: url(font-awesome/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'), 
       url(font-awesome/fonts/fontawesome-webfont.woff) format('woff'), 
       url(font-awesome/fonts/fontawesome-webfont.ttf) format('truetype'), 
       url(font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
  font-weight: 400;
  font-style: normal
}
1
monteirobrena

Je suis sûr que c'est résolu, mais cela a fonctionné pour moi, alors ... je vais laisser ça ici:

Je viens d'avoir le même problème avec une police que j'avais utilisé auparavant. En fait, cela était dû à un problème de FTP. Le fichier a été téléchargé sous forme de texte (ASCII) au lieu de fichier binaire, ce qui a corrompu le fichier. J'ai simplement ré-téléchargé les fichiers de polices, puis tout a fonctionné.

0
Andre Aquiles