Police Awesome ne fonctionne pas, les icônes s'affichent sous forme de carrés

224

J'essaie donc de créer un prototype de page 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:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

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

<i class="icon-camera-retro"></i>

Mais tout cela est rendu dans un grand carré. Quelqu'un sait-il ce qui pourrait se passer?

css html twitter-bootstrap font-awesome Connor Black
la source
1
Importez-vous la police?
Mayhewr
1
Probablement pas. Je pensais que vous n'aviez qu'à inclure le .cssfichier.
Connor Black
2
Le titre implique que le problème est spécifique à Chrome. Se charge-t-il dans d'autres navigateurs ou le fichier de police référencé affiche-t-il un 404?
cimmanon
1
Impossible de trouver l'étape 3 sur le lien ci-dessus en août 2016 ... Des redirections ??
Saurabh Tiwari
1
Vous avez probablement oublié de copier le dossier webfont?
2018 à 8h13

Réponses:

149

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

mayhewr
la source
5
Excellente réponse, juste pour donner des informations supplémentaires, vous pouvez également placer les polices dans le chemin par défaut fourni par le css, ouvrez simplement Font-awesome.css et vous trouverez l'entrée suivante: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
Juste pour les futurs lecteurs ASP.NET MVC avec le même problème: si vous avez tous les dossiers au bon endroit, vérifiez si vous avez ajouté le type MIME sur votre fichier web.config comme indiqué ici: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Si vous utilisez le schéma URI de données avec une version base64 de la police (peut facilement être convertie en ligne), vous n'avez pas à vous soucier du chemin d'accès au fichier et de l'hébergement des ressources.
— RenaissanceProgrammer
Remarque : si vous ne voulez pas modifier le css, mettez simplement le css et les polices dans le même dossier, vérifiez ceci
— shaijut
7
@tutuca: Tout le monde ne peut pas utiliser un CDN.
— Courses de légèreté en orbite du
188

Vous devez avoir 2 classes, la faclasse et la classe qui identifie l'icône désirée fa-twitter, fa-searchetc ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— Nabil Kadimi
source
4
Cela devrait être la meilleure réponse, le CSS a fourni des points vers le bon emplacement pour les fichiers de police tant que vous ne les déplacez pas - cela me faisait monter le mur merci
— alex3410
5
Remarque: "Le préfixe fa a été déconseillé dans la version 5. Le nouveau défaut est le style fas solid et le style fab pour les marques."
— Terje Solem
1
Cela l'a corrigé pour moi! J'utilise Angular (5 je pense) avec primeng et il semble que la police géniale fonctionnait déjà pour par exemple les définitions de MenuItem dans xx.component.ts (les icônes rendues correctement). Cependant: lors de l'ajout de quelque chose à xx.component.html (par exemple, un bouton p avec une icône), il faut ajouter la classe fa et fa- <quelle que soit l'icône>!
— Igor
1
@TerjeSolem, les informations que vous avez fournies sont très importantes. Cela a résolu mon problème. car
— j'utilisais une
🤦‍♂️ Merci beaucoup! J'ai obtenu la même chose avec les icônes ouvertes oi oi -... J'ai perdu le premier oi.
— Alexandr
54

Utilisez ceci 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

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

— Kumar Deepam
source
6
cela suppose que vous souhaitez utiliser le CDN de font-awesome. Pour un environnement de production commerciale, je ne ferais pas cela.
— Jay Edwards
48

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

J'espère que cela aide quelqu'un.

— Bren1818
source
11
BINGO! Merci beaucoup. Metro-UI remplaçait la famille de polices font-awesome. J'ai dû ajouter ceci: .fa {font-family: 'FontAwesome'! Important; } alors cela a fonctionné.
Debbie A
1
Oui. Idiot et petit. Cela - changer la police pour quelque chose d'autre et affecter des icônes impressionnantes - m'est arrivé tellement de fois que ça devient stupide.
Edd
2
Oui - cette ligne était à blâmer (pour être plus précis, la! Règle importante): * {font-family: 'Source Sans Pro'! Important}
Svet
1
C'est le conseil le plus important et le plus utile sur l'utilisation de Font Awesome pour éviter de perdre du temps à trouver un problème.
Dez
22

Si vous utilisez LESS ou SASS, ouvrez le fichier font-awesome.less / sass et modifiez la variable de chemin @fa-font-path: "../font";qui pointe vers les polices 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 modifiez 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;
}
jonschlinkert
la source
Existe-t-il un moyen d'importer uniquement certaines icônes au lieu de toutes? Je voudrais seulement compiler mon fichier css en quelques icônes.
user805981
@fa-font-path: "../fonts";travaillé pour moi. (Remarquez les disparus sajoutés)
prograhammer
18

Ouvrez votre code theres font-awesome.css 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 la manière la plus simple:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Erga Kandly
la source
13

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
Vojkan Cvijanovic
la source
12

J'utilise Font Awesome 4.3.0tout lien de travaux maxcdn comme mentionné ici ,

mais pour héberger dans votre serveur, mettre les polices et les css dans le même dossier a fonctionné pour moi, comme ceci

entrez la description de l'image ici

puis il suffit de lier le css:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

l'espoir aide quelqu'un.

shaijut
la source
8

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

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
Israël
la source
3
Je ne m'en rendais pas compte - à partir de la version 5, ils nécessitent désormais une classe fabou fasau lieu de la faclasse.
Echilon
7

J'ai eu ce problème. Le problème était que j'avais un style CSS de famille de polices avec! Important remplaçant la police fontawesome.

Jonny White
la source
J'ai eu le même problème avec * {font-family: Helvetica, sans-serif! Important; }
Dubbo
6

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

Si vous avez placé vos fichiers par exemple dans la structure de fichiers 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

Contrôle 1) Utilisez-vous correctement un Package Resource Guard pour permettre de charger correctement les fichiers de police?

Exemple de votre classe qui étend WebApplication:

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

}

Contrôle 2) Après vous être assuré que toutes les polices sont correctement transférées vers le navigateur Web, vérifiez ce qui a été réellement transféré vers le navigateur Web, c'est-à-dire si l'intégrité des fichiers de polices a changé? 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 du développeur Web de Firefox et DiffDog (pour la comparaison de fichiers).

En particulier, si vous utilisez Maven, tenez compte du filtrage des ressources. Ne filtrez pas le dossier où se trouvent vos fichiers / font - sinon ils seront corrompus.

Exemple de votre pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

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 binaires, veuillez également consulter la documentation:

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

En particulier, la documentation avertit: " Avertissement: ne filtrez pas les fichiers avec du contenu binaire comme les images! Cela entraînera très probablement une sortie corrompue. Si vous avez à la fois des fichiers texte et des fichiers binaires comme ressources, vous devez déclarer deux ensembles 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 ... "

Philipp
la source
6

J'ai eu ce problème et j'ai parcouru chaque étape attentivement ... même si j'utilise FA depuis des lustres ... puis j'ai réalisé que j'avais cette ligne dans mon fichier css de messagerie:

* {
font-family: Arial !important;
}

Erreur idiote, mais cela pourrait avertir quelqu'un à l'avenir!

J Doe
la source
4

Vous devez renvoyer l'en-tête Access-Control-Allow-Origin à * pour vos fichiers de polices

tronic
la source
2
Exactement! L'utilisation de fournisseurs tiers pour servir vos fichiers impressionnants de polices ne résout pas votre problème, il vous suffit de le transmettre à d'autres pour le résoudre.
Simanas
4

Depuis décembre 2018, je trouve plus facile d'utiliser la version stable 4.7.0 hébergée sur bootstrapcdn au lieu du cdn 5.xx police-génial sur leur site Web - car chaque fois qu'ils mettent à jour des versions mineures, la version précédente cassera.

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Les icônes sont les mêmes:

<i class="fa fa-facebook"></i>
ehacinom
la source
3

font-weight: 900;

J'ai eu un problème différent avec Font Awesome 5. Le poids de police par défaut devrait être 900 pour les icônes FontAwesome mais je l'ai remplacé par 400 pour les balises span et i. Cela a juste fonctionné, quand je l'ai corrigé.

Voici la référence du problème sur leur page Github, https://github.com/FortAwesome/Font-Awesome/issues/11946

J'espère que cela aidera quelqu'un.

manian
la source
1
merci, c'était aussi mon problème. J'ai défini la famille de polices sur "Font Awesome 5 Free", mais j'avais également besoin d'un poids de police de 900!
Hans Vonn
3

Si vous utilisez la version 5. * ou supérieure, vous devez utiliser le

all.css ou all.min.css

L'inclusion de fontawesome.css ne fonctionne pas car il n'a aucune référence au dossier webfonts et il n'y a aucune référence à @ font-face ou font-family

Vous pouvez l'inspecter en recherchant le code de la propriété font-family dans fontawesome.css ou fontawesome.min.css

the_haystacker
la source
celui-ci était la solution parfaite pour moi - dommage que la réponse soit si loin ci-dessous, je ne l'ai pas vue et j'ai dû la découvrir par moi
Cold_Class
2

Il est possible que votre chemin de police ne soit pas correct, de sorte que css ne soit pas en mesure de charger la police et de rendre les icônes, vous devez donc fournir le chemin échoué des polices attachées.

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

Utilisez ceci, <i class="fa fa-camera-retro" ></i>vous n'avez pas défini de classes fa

jitendra varshney
la source
2

À partir de la version 5, si vous avez téléchargé le package à partir de ce site:

https://fontawesome.com/download

Les polices se trouvent dans les fichiers all.css et all.min.css.

Voici à quoi ressemblerait votre référence en utilisant la dernière version maintenant (remplacez-la par votre dossier):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
l'amour en direct
la source
2

Après avoir eu du mal à trouver une solution et à ne PAS trouver la documentation officielle utile, cela a résolu le problème pour moi:

  1. Téléchargez le Fontawesome.zip. J'utilise la version 5.10.2 et je l'ai obtenue d'ici https://fontawesome.com/download

  2. À l'intérieur du fichier zip, il y a plusieurs dossiers.Vous n'avez besoin que des dossiers css et webfonts entrez la description de l'image ici

    1. Créez 2 dossiers dans vos projets Web et nommez-les css et webfonts. entrez la description de l'image ici

Ces noms sont obligatoires. Maintenant, copiez le contenu des CSS et des polices Web à partir du zip dans les dossiers correspondants de votre projet. Et c'est tout!

Méfiez-vous des fontawesome! Awesomeness rend les choses simples pour l'utilisateur!

BabaNew
la source
1

J'ai changé de 3.2.1 à 4.0.1 et le dossier était police et s'appelle maintenant polices.

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 aide quelqu'un.

André Duarte
la source
1

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 Sass helper assest de sprockets utilisées pour trouver le chemin d'accès approprié au fichier de police.

Marklar
la source
1

si vous utilisez sass et avez importé dans votre fichier 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: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

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

vilsbole
la source
1

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 chercherait 1 niveau plus haut qu'il ne l'est. Comme tous mes fichiers css étaient dans le dossier css et j'ai ajouté les polices dans le même dossier, cela ne fonctionnait pas.

Déplacez simplement votre dossier de polices d'un niveau et tout devrait bien se passer :)

Testé avec Font Awesome 5.0

Ross
la source
Cela devrait être la réponse préférée car elle répond à la question directement sans lien avec une documentation obsolète. Kudos
Kyle Champion
1

Je faisais le même problème avec 5 impressionnante police téléchargée avec du fil, j'ai ajouté le fichier min.css ALONG avec le fichier all.js.

J'espère que cela aide quelqu'un quelqu'un

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
Enrique Martinez
la source
1

Le fichier /css/all.css contient le style principal ainsi que tous les styles d'icônes dont vous aurez besoin lors de l'utilisation de Font Awesome. Le dossier / webfonts contient tous les fichiers de police de caractères dont dépend le CSS ci-dessus.

Copiez l'intégralité du dossier / webfonts et le fichier /css/all.css dans le répertoire des actifs statiques de votre projet (ou là où vous préférez conserver les actifs frontaux ou les éléments du fournisseur).

Ajoutez une référence au fichier /css/all.css copié dans le modèle ou la page sur laquelle vous souhaitez utiliser Font Awesome.

Visitez simplement - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Vous obtiendrez la réponse.

Dipesh Chauhan
la source
0

L'utilisation de chemins absolus plutôt que 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 j'ai trouvé que le serveur renvoyait 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");
}

Le chemin absolu l'a résolu à travers le navigateur:

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

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

Tim
la source
0

Cela ne fonctionnait pas pour moi car j'avais une Allow from nonedirective pour le répertoire racine dans 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:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

J'ai choisi de continuer à interdire l'accès à ma racine et à la place j'ai ajouté une autre entrée de répertoire dans ma configuration apache pour root / font-awesome / 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
user3325776
la source