Font Awesome ne fonctionne pas, les icons s’affichent sous forme de carrés

J’essaie donc de prototyper une page de marketing et j’utilise Bootstrap et le nouveau fichier Font Awesome. Le problème est que lorsque j’essaie d’utiliser une icône, tout ce qui est rendu sur la page est un grand carré.

Voici comment j’inclus les fichiers dans la tête:

 Page Title       

Et voici un exemple de moi essayant d’utiliser une icône:

  

Mais tout cela est rendu dans un grand carré. Est-ce que quelqu’un sait ce qui pourrait se passer?

Selon la documentation (étape 3), vous devez modifier le fichier CSS fourni pour indiquer l’emplacement de la police sur votre site.

Vous devez avoir 2 classes, la classe fa et la classe qui identifie l’icône désirée fa-twitter , fa-search , etc.

     

Utilisez ceci

  

J’ai eu un problème similaire avec Amazon Cloudfront CDN mais il a été résolu après avoir commencé à le charger à partir de maxcdn

Cela peut vous aider, vérifiez que vous n’avez pas modifié par inadvertance la famille de fonts sur l’icône. Si vous avez modifié la famille de fonts de l’élément .fa à partir de: FontAwesome, l’icône ne s’affichera pas. C’est toujours quelque chose de stupide et de petit.

J’espère que ça aide quelqu’un.

Si vous utilisez LESS ou SASS, ouvrez le fichier font-awesome.less / sass et éditez la variable de chemin @fa-font-path: "../font"; qui pointe vers les fonts réelles:

 @fa-font-path: "../font"; @font-face { font-family: 'FontAwesome'; src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1'); src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight: normal; font-style: normal; } 

Même chose avec CSS, sauf que vous éditez le chemin dans le bloc de déclaration @ font-face:

 @font-face { font-family: 'FontAwesome'; src: url('your/path/fontawesome-webfont.eot?v=3.0.1'); src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight: normal; font-style: normal; } 

Ouvrez votre code font-awesome.css theres comme:

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

vous devez avoir un dossier comme:

 font awesome -> css -> fonts 

ou le plus simple:

  

J’ai essayé de résoudre le même problème avec quelques solutions précédentes, mais elles ne fonctionnaient pas dans ma situation. Enfin, j’ai ajouté ces 2 lignes dans HEAD et cela a fonctionné:

   

J’utilise Font Awesome 4.3.0 juste en reliant des travaux de maxcdn comme mentionné ici ,

mais pour héberger dans votre serveur en mettant des fonts et css dans le même dossier travaillé pour moi, comme ça

entrer la description de l'image ici

alors il suffit de lier le css:

  

l’espoir aide quelqu’un.

Si vous travaillez avec Maven et Apache Wicket, vérifiez également les points suivants pour essayer de résoudre le problème avec Font-Awesome et les icons non chargées:

Si vous avez placé vos fichiers par exemple dans la structure de fichier suivante

 /src /main /java /your /package /css font-awesome.css /font fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.svgz fontawesome-webfont.ttf fontawesome-webfont.woff 

Vérification 1) Utilisez-vous correctement une ressource de ressource de paquet afin de permettre de charger les fichiers de police correctement?

Exemple de votre classe qui étend WebApplication:

 @Override public void init() { super.init(); get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard()); } 

Vérification 2) Après vous être assuré que toutes les fonts sont correctement transférées dans le navigateur Web, vérifiez ce qui a été réellement transféré dans le navigateur Web, c’est-à-dire si l’intégrité des fichiers de police a été modifiée? Comparez les fichiers de votre répertoire source et les fichiers transférés vers le navigateur Web à l’aide, par exemple, de la barre d’outils Web Developer de Firefox et DiffDog (pour la comparaison de fichiers).

En particulier, si vous utilisez Maven, soyez conscient du filtrage des ressources. Ne filtrez pas le dossier contenant vos fichiers / font, sinon ils seront corrompus.

Exemple de votre pom.xml

  Your project   true src/main/resources   false src/main/java  **   **/*.java     

Dans l’exemple ci-dessus, nous ne filtrons pas le dossier src / main / java, où se trouvent les fichiers css et font.

Pour plus d’informations sur le filtrage des données binarys, veuillez également consulter la documentation:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

En particulier, la documentation prévient: ” Attention: ne filtrez pas les fichiers avec un contenu binary comme des images! Cela entraînera probablement une sortie corrompue. Si vous disposez à la fois de fichiers texte et de fichiers binarys, vous devez déclarer deux jeux de ressources mutuellement exclusifs. Le premier ensemble de ressources définit les fichiers à filtrer et l’autre ensemble de ressources définit les fichiers à copier sans modification … ”

J’ai eu ce problème. Le problème était que j’avais un style CSS de famille de fonts avec! Important pour remplacer la police fontawesome.

Cela devrait être beaucoup plus simple dans la nouvelle version 3.0. Le plus facile est de pointer vers le CDN Bootstrap: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Si votre serveur est IIS, veillez à append le fichier MIME approprié pour l’extension du fichier .woff. Le bon MIME est application/octet-stream

Vous devez renvoyer l’en-tête Access-Control-Allow-Origin à * pour vos fichiers de fonts.

Utilisez cette vous n’avez pas défini de classes fa

Vous devez avoir 2 classes, le cours de classe et la classe fa, peut-être que cela fonctionnera:

 // Wrong  // Correct  

J’ai changé de 3.2.1 à 4.0.1 et le dossier était de la police et s’appelle maintenant des fonts.

src: url (‘../ font / fontawesome-webfont.eot? v = 3.2.1’);

src: url (‘../ fonts / fontawesome-webfont.eot? v = 4.0.1’);

J’espère que ça aidera quelqu’un.

J’utilise la police officielle Awesome SASS Ruby Gem et j’ai corrigé l’erreur en ajoutant la ligne ci-dessous à mon application.css.scss

 @import "font-awesome-sprockets"; 

Explication:

Le fichier font-awesome-sprockets inclut les fonctions d’assistant Sass de test des pignons utilisées pour trouver le chemin approprié vers le fichier de police.

si vous utilisez sass et avez importé dans votre main.scss @import '../vendor/font-awesome/scss/font-awesome.scss';

L’erreur peut provenir du fichier font-awesome.scss qui recherche les fichiers de police dans son chemin relatif.

N’oubliez donc pas de remplacer la variable $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

comme ça il n’y a pas besoin d’append le cdn dans votre index.html

Il est possible que votre chemin de police ne soit pas correct, de sorte que css ne puisse pas charger la police et rendre les icons, vous devez donc fournir le chemin échoué des fonts attachées.

 @font-face { font-family: "FontAwesome"; src: url("fonts/fontawesome-webfont.eot"); } 

Utiliser des chemins absolus au lieu de chemins relatifs l’a résolu pour moi. J’utilisais des chemins relatifs (voir le premier exemple ci-dessous) et cela n’a pas fonctionné. J’ai vérifié via la console et trouvé que le serveur retournait un 404, fichiers non trouvés.

Le chemin relatif a provoqué un 404:

 @font-face { font-family: "FontAwesome"; src: url("../fonts/fontawesome-webfont.eot?v=4.0.3"); } 

Chemin absolu résolu, navigateur croisé:

 @font-face { font-family: "FontAwesome"; src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3"); } 

Je ne recommanderais pas de le faire, sauf si vous devez le faire, mais cela fonctionne pour moi. Bien sûr, vous devriez répéter ceci pour tous les formats de police dans le fichier font-awesome.css.

Cela ne marchait pas pour moi car j’avais une directive Allow from none pour le répertoire racine de ma configuration apache. Voici comment je l’ai fait fonctionner …

Ma structure de répertoire:

 root/ root/font-awesome/4.4.0/css/font-awesome.min.css root/font-awesome/4.4.0/fonts/fontawesome-webfont.* root/dir1/index.html 

où mon index.html a:

  

J’ai choisi de continuer à interdire l’access à ma racine et j’ai ajouté une autre entrée de répertoire dans la configuration d’Apache pour root / font-awesome /

  Allow from all  

Mon problème était d’append le

  

à l’intérieur d’un

   

marque

Je l’ai corrigé en le plaçant en dehors de l’étiquette.

Ce qui a résolu le problème pour moi (sur ma machine Windows 7) était le décryptage du répertoire de mon projet. Le nombre de problèmes visuels et fonctionnels qui en découlent lors du test de votre site Web est fou. Accédez simplement à une invite de commande et lancez:

 atsortingb -R %PROJECT_PATH%\*.* /S cipher /a /d /s:%PROJECT_PATH% 

… où% PROJECT_PATH% est le chemin d’access complet au répertoire dans lequel votre code est stocké.

Vérifiez le fichier fontawesome-all.css – tout en bas, il y aura un chemin vers le dossier webfonts. Le mien avait le format “../webfonts”, ce qui signifiait que le fichier css regarderait à 1 niveau de là où il se trouve. Comme tous mes fichiers CSS étaient dans le dossier css et que j’ai ajouté les fonts au même dossier, cela ne fonctionnait pas.

Il suffit de déplacer votre dossier de fonts vers le haut et tout devrait bien se passer 🙂

Testé avec Font Awesome 5.0

Maintenant, dans fontawesome 5, vous pouvez fournir une version en cache de JS sur Https.

  

Plus d’infos sur https://fontawesome.com/get-started/svg-with-js

Utiliser avec la classe supérieure

 

J’ai eu ce problème et passé chaque étape avec soin … même si j’utilise FA depuis des lustres … et puis j’ai réalisé que j’avais cette ligne dans mon fichier mail css:

 * { font-family: Arial !important; } 

Erreur idiote, mais cela pourrait renvoyer quelqu’un à l’avenir!

J’ai essayé un certain nombre de suggestions ci-dessus sans succès.

J’utilise les packages NuGeT. La version est ( pour une raison quelconque ) multiple nommée ( font-awesome, fontawesome, font.awesome, etc. )

Pour ce que ça vaut: j’ai enlevé toute la version installée et puis seulement installé la dernière version de font.awesome . font.awesome a simplement fonctionné sans avoir besoin de modifier ou de configurer quoi que ce soit.

Je suppose qu’il y a un certain nombre de choses qui manquent dans les autres versions nommées.

J’ai trouvé une solution aujourd’hui qui consistait à:

  1. Téléchargez l’intégralité du projet depuis leur page Github
  2. Suivez ensuite les étapes restantes sur leur page sous la section CSS par défaut pour déplacer le répertoire dans votre projet et append le lien dans la section HEAD d’un fichier .html.

Le problème avec leur documentation est qu’ils ne spécifient pas de lien vers l’endroit où vous devriez obtenir une copie du projet complet de font-awesome à intégrer dans votre projet.