Police Awesome ne fonctionne pas, les icônes apparaissent sous forme de carrés
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é. Est-ce que quelqu'un sait ce qui pourrait se passer?
Selon la documentation (étape 3), vous devez modifier le fichier CSS fourni pour qu'il pointe vers 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.
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
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 depuis maxcdn.
Cela peut aider, vérifiez que vous n'avez pas modifié par inadvertance la famille de polices sur l'icône. Si vous avez modifié la famille de polices de l'élément .fa à partir de: FontAwesome, l'icône ne s'affiche pas. C'est toujours quelque chose d'idiot 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 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;
}
Pareil 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 font-awesome.css Theres code 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 moyen le plus simple:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
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é:
<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">
j'utilise Font Awesome 4.3.0 juste en liant de maxcdn fonctionne comme mentionné ici ,
mais to Héberger sur votre serveur mettre les polices et css dans le même dossier a fonctionné pour moi, comme ceci
ensuite, liez simplement le fichier css:
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
l'espoir aide quelqu'un.
J'ai eu ce problème. Le problème était que j’avais un style CSS de famille de polices avec! Important de remplacer la police fontawesome.
Si vous travaillez avec Maven et Apache Wicket, vérifiez également les éléments suivants pour tenter 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
Vérification 1) Utilisez-vous correctement un package Resource Guard afin de permettre de charger correctement les fichiers de polices?
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 polices sont correctement transférées vers le navigateur Web, vérifiez ce qui a réellement été transféré vers le navigateur Web, c.-à-d. Si l'intégrité des fichiers de polices a été modifiée. Comparez les fichiers de votre répertoire source et ceux transférés vers le navigateur Web à l'aide, par exemple, de la barre d'outils de développeur Web de Firefox et de DiffDog (pour la comparaison de fichiers).
En particulier, si vous utilisez Maven, soyez conscient du filtrage des ressources. Ne filtrez pas le dossier dans lequel vos fichiers/font sont contenus - 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ù sont contenus 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 indique: "Avertissement: Ne filtrez pas les fichiers avec Un contenu binaire tel que des images! Cela entraînera probablement une sortie corrompue . Si vous avez 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 ... "
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>
Cela devrait être beaucoup plus simple dans la nouvelle version 3.0. Le plus simple est de pointer vers le CDN Bootstrap: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome
J'ai eu ce problème et ai parcouru chaque étape avec soin ... même si j'utilise FA depuis longtemps ... et puis j'ai réalisé que j'avais cette ligne dans mon fichier css mail:
* {
font-family: Arial !important;
}
Silly erreur, mais cela pourrait tromper quelqu'un à l'avenir!
Si votre serveur est IIS, veillez à ajouter le MIME correct pour servir l'extension de fichier .woff . Le MIME correct est application/octet-stream
Utilisez ce <i class="fa fa-camera-retro" ></i> vous n'avez pas défini de classes fa
Vous devez retourner l'en-tête Access-Control-Allow-Origin to * pour vos fichiers de polices.
Il se peut que votre chemin de police ne soit pas correct, de sorte que css ne puisse pas charger la police et rendre les icônes; vous devez donc fournir le chemin d'accès échoué des polices attachées.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
J'ai changé de 3.2.1 à 4.0.1 et le dossier était la police et s'appelle maintenant les 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.
J'utilise le police géniale SASS Ruby Gem et je répare 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 de l'assest de sprockets assest helper qui permettent de trouver le chemin correct 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.
Donc souvenez-vous pour écraser la variable $ fa-font-path:
$fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;
comme cela, il n’est pas nécessaire d’ajouter le cdn à votre index.html
Cela ne fonctionnait pas pour moi car j'avais la directive Allow from none pour le répertoire racine de ma configuration Apache. Voici comment je l'ai obtenu au travail ...
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>
Tant de réponses que j'ajoute donc mon travail pour moi (Changer de nom si vous n'utilisez pas PRO): In _typography.less
//
// Common
// _____________________________________________
& when (@media-common = true) {
.lib-font-face(
@family-name: @font-family-name__fontawsomeregular,
@font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
@font-weight: 400,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomelight,
@font-path: '@{baseDir}fonts/webfonts/fa-light-300',
@font-weight: 300,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomebrands,
@font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
@font-weight: normal,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomesolid,
@font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
@font-weight: 900,
@font-style: normal
);
}
En _theme.less
@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';
// Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';
et exemple d'utilisation:
.my-newclass:before{
content: '\f002';
display: inline-block;
float: left;
font-family: @font-family-name__fontawsomelight;
font-size: 16px;
}
Utiliser des chemins absolus au lieu de chemins relatifs a résolu le problème pour moi. J'utilisais des chemins relatifs (voir le premier exemple ci-dessous) et cela ne fonctionnait pas. J'ai vérifié via la console et trouvé que le serveur retournait un 404, fichiers non trouvés.
Chemin relatif a causé un 404:
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}
Le chemin absolu a résolu le problème sur plusieurs navigateurs:
@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 cette opération pour tous les formats de police du fichier font-awesome.css.
Vérifiez le fichier fontawesome-all.css. Tout en bas, il y aura un chemin d'accès au dossier webfonts. Le mien avait le format "../webfonts", ce qui signifiait que le fichier css serait à un niveau supérieur de là où il se trouve. Comme tous mes fichiers css se trouvaient dans le dossier css et que j’avais ajouté les polices au même dossier, cela ne fonctionnait pas.
Il suffit de déplacer votre dossier de polices d’un niveau à un autre et tout devrait bien se passer :)
Testé avec Font Awesome 5.0
Si vous avez installé font-awesome via le gestionnaire de paquets ( fil ou npm ), sachez quelle version a été installée. Sinon, si vous avez déjà installé font-awesome il y a longtemps, vérifiez quelle version a été installée.
En substance, les versions installées via des gestionnaires de paquets peuvent être en retard sur la version affichée sur le site Web https://fontawesome.com/ . Ainsi, tel qu’il est aujourd’hui (21.06.2019), le gestionnaire de paquets installera la version la plus récente v4.7.0 , mais le site Web désignera la documentation faisant référence à v5. * .
Solution, visitez le site Web documentant les icônes pour v4.7.0https://fontawesome.com/v4.7. , copiez l'icône appropriée, par exemple. <i class="fa fa-sign-in" aria-hidden="true"></i> et l'intégrer à votre html. Plus de contexte peut être trouvé ici .
font-weight: 900;
J'ai 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 écrasé à 400 pour les balises span et i. Cela a juste fonctionné, quand je l'ai corrigé.
Voici la référence au numéro sur leur page Github, https://github.com/FortAwesome/Font-Awesome/issues/11946
J'espère que ça va aider quelqu'un.
A partir de la version 5, si vous avez téléchargé le package depuis ce site:
https://fontawesome.com/download
Les polices sont dans les fichiers all.css et all.min.css.
Voici à quoi ressemblerait votre référence en utilisant la dernière version (remplacez-la par votre dossier):
<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
Maintenant, dans fontawesome 5, vous pouvez fournir une version en cache de JS sur Https.
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
Plus d'infos sur https://fontawesome.com/get-started/svg-with-js
Mon problème était d'ajouter le
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
à l'intérieur d'un
<!-- build:css assets/styles/main.css -->
<!-- endbuild -->
étiquette
Je l'ai corrigé en le plaçant à l'extérieur de la balise.
Ce qui a résolu le problème pour moi (sur ma machine Windows 7) était le déchiffrement du répertoire de mon projet. Il est fou de voir combien de problèmes visuels et fonctionnels découlent de cela lors du test de votre site Web. Il suffit d’accéder à une invite de commande et d’exécuter:
attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%
... où% PROJECT_PATH% est le chemin complet du répertoire dans lequel votre code est stocké.
Utiliser avec la classe supérieure
<div class="container">
<i class="fa fa-facebook"></i>
</div>
Depuis décembre 2018, je trouve qu'il est plus facile d'utiliser la version stable 4.7.0 hébergée sur bootstrapcdn au lieu de font-awesome 5.xx cdn sur leur site web - puisque chaque fois qu'ils mettent à niveau des versions mineures, la version précédente WILL Pause.
<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>
J'ai essayé plusieurs des suggestions ci-dessus sans succès.
J'utilise les packages NuGeT . Ils sont (pour une raison quelconque) version nommée multiple (font-awesome, fontawesome, font.awesome, etc.)
Pour ce que ça vaut: J'ai enlevé toute la version installée, puis seulement la dernière version de font.awesome . font.awesome vient de travailler sans avoir besoin de modifier ou de configurer quoi que ce soit.
Je suppose qu'il manque un certain nombre d'éléments dans les autres versions nommées.
S'il-vous-plait ajoutez
@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
font-family: 'FontAwesome';
src: url('https://****.net/*********/FontAwesome.otf');
src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}
En haut de votre css, téléchargez et liez correctement le css et la police, le problème vient de ce que FontAwesome ne se charge pas correctement.
Merci