Bootstrap 3 Les glyphicons ne fonctionnent pas
J'ai téléchargé bootstrap 3.0 et je ne parviens pas à faire fonctionner les glyphicons. Je reçois une sorte d'erreur "E003". Des idées pourquoi cela se produit? J'ai essayé localement et en ligne et j'ai toujours le même problème.
Je parcourais ma vieille question et, comme je l'avais déjà dit dans les commentaires, ce qui était censé être la bonne réponse jusqu'à présent, je pense que j'en mérite également le mérite.
Le problème résidait dans le fait que les les fichiers de polices glyphicon téléchargés à partir de l'outil de personnalisation de bootstrap n'étaient pas identiques à ceux téléchargés à partir de la redirection trouvée sur la page d'accueil de bootstrap. Ceux qui fonctionnent comme ils devraient ceux qui peuvent être téléchargés à partir du lien suivant:
http://getbootstrap.com/getting-started/#download
Toute personne ayant des problèmes avec d'anciens fichiers de personnalisation incorrects doit écraser les polices à partir du lien ci-dessus.
J'avais le même problème et je ne pouvais trouver aucune information à ce sujet sauf dans les commentaires cachés sur cette page. Mes fichiers de polices se chargeaient très bien selon Chrome, mais les icônes ne s’affichaient pas correctement. J'en fais une réponse pour que cela puisse aider les autres, espérons-le.
Quelque chose n'allait pas avec les fichiers de police que j'ai téléchargés à partir de l'outil de personnalisation de Bootstrap 3. Pour obtenir les polices correctes, allez à la page d'accueil Bootstrap et téléchargez le fichier .Zip complet. Extrayez les quatre fichiers de police de là dans votre répertoire de polices et tout devrait fonctionner.
Note aux lecteurs: assurez-vous de lire commentaire de @ user226107 et réponse de Jeff concernant un bogue dans le personnaliseur. C'est probablement la cause de votre problème.
Le fichier de police n'est pas chargé correctement. Vérifiez si les fichiers sont à l'emplacement prévu.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Comme indiqué par Daniel, il pourrait également s'agir d'un problème de type MIME. Les outils de développement de Chrome affichent les polices téléchargées dans l'onglet Réseau:
Dans mon cas, je recevais un 404 pour glyphicons-halflings-regular.woff , et non visible glyphiques sur les navigateurs mobiles.
On dirait qu'il y a une certaine confusion à propos du type MIME pour woff, plus d'un type MIME étant accepté par différents navigateurs, mais le W3C dit :
application/font-woff
Edit: Après avoir testé le type MIME suivant, woff fonctionne sur tous les navigateurs:
application/x-font-woff
Edit: La dernière version de Bootstrap pour le moment (3.3.5) utilise des polices .woff2 avec le même résultat initial que .woff, le W3C reste définissant la spécification mais pour le moment le type MIME semble être:
application/font-woff2
- - Si vous avez suivi la réponse la mieux notée et que cela ne fonctionne toujours pas:
Le dossier FontDOIT se situer au même niveau que votre dossier CSS. Correction du chemin dans bootstrap.cssne fonctionnera pas fonctionnera.
Bootstrap.css doit accéder au dossier Fonts exactement comme ceci:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Si les autres solutions ne fonctionnent pas, essayez d’importer des Glyphicons depuis une source externe, au lieu de vous fier à Bootstrap pour tout faire à votre place. Pour faire ça:
Vous pouvez le faire en HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Ou CSS:
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")
Merci à edsiofi pour ce fil de discussion: Bootstrap 3 Glyphicons CDN
Les sites Web Azure sont manquants woff configuration MIME. Vous devez ajouter l'entrée suivante dans web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
Comme @Stijn l'a décrit, l'emplacement par défaut dans Bootstrap.css est incorrect lors de l'installation de ce package à partir de Nuget.
Changez cette section pour ressembler à ceci:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('Content/fonts/glyphicons-halflings-regular.eot');
src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Au cas où quelqu'un d'autre se retrouverait ici et utiliserait Bootstrap> = v4.0: la prise en charge de glyphicon est abandonnée
La partie pertinente des notes de publication:
Supprimé la police de l'icône Glyphicons. Si vous avez besoin d'icônes, voici quelques options:
la version amont de Glyphicons
Source: https://v4-alpha.getbootstrap.com/migration/#components
Si vous souhaitez utiliser des glyphicons, vous devez le télécharger séparément.
J'ai personnellement essayé Font Awesome et c'est assez bon. L'ajout d'icônes est similaire à la manière glypicon:
<i class="fas fa-chess"></i>
IIS ne servira pas les fichiers .woff par défaut. Par conséquent, dans IIS, vous devrez ajouter une entrée <mimeMap> à votre fichier web.config.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
</system.webServer>
</configuration>
J'ai modifié mon fichier moins variables.less j'ai modifié la variable
@icon-font-path: "fonts/";
l'original était
@icon-font-path: "../fonts/";
Ça posait un problème
Vous pouvez ajouter cette ligne de code et c'est fait.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Merci.
Cela est dû à un code incorrect dans bootstrap.css et bootstrap.min.css. Lorsque vous téléchargez Bootstrap 3.0 à partir du programme de personnalisation, le code suivant est manquant:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Comme il s’agit du code principal d’utilisation des glyphiques, cela ne fonctionnera pas ...
Téléchargez les fichiers css du package complet et ce code sera implémenté.
C'est la raison pour laquelle les icônes ne sont pas apparues pour moi:
* {
arial, sans-serif !important;
}
Après avoir supprimé cette partie de mon CSS, tout a fonctionné comme il se doit. Le! Important était celui qui causait des problèmes.
Avez-vous tous les fichiers ci-dessous dans votre répertoire de polices
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Ci-dessous est ce qui l'a corrigé pour moi. Je devenais erreur "mauvaise URI" utilisant dans la console Firebug. Les icônes apparaissaient sous la forme de numéros E ###. Je devais ajouter un fichier .htaccess dans mon répertoire "polices". <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Doublage possible de: Police téléchargeable sur firefox: mauvaise adresse URI ou accès multisite non autorisé
C'est vraiment un long tournage, mais c'était mon cas et puisqu'il n'est pas déjà là.
Si vous compilez Twitter Bootstrap de SASS en utilisant gulp-sass ou grunt-sass c'est-à-dire. node-sass. Assurez-vous que vos modules de nœuds sont à jour, en particulier si vous travaillez sur un projet plutôt ancien.
Il s'avère que la directive SASS @at-root est utilisée dans la définition de @font-face en glyphiques, voir https://github.com/twbs/bootstrap-sass /blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .
Le problème ici est que node-sass c'est-à-dire. libsass ne supporte pas la directive @at-root si elle est trop ancienne. Si tel est le cas, vous obtiendrez un @font-face enveloppé dans un @at-root dont le navigateur ne sait pas quoi faire. Il en résulte qu'aucune police ne sera téléchargée et que vous verrez probablement des ordures au lieu d'icônes.
Un autre problème/solution peut être d'avoir ce code Bootstrap 2.x:
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
et lors de la migration basée sur le guide (.icon-* ---> .glyphicon .glyphicon-*):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
vous oubliez d'ajouter la classe icon (contenant la référence de la police):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
Voici ce que dit la documentation officielle concernant les polices non rendues.
La modification de l'emplacement de la police de l'icône Bootstrap suppose que les fichiers de police de l'icône seront situés dans le répertoire ../fonts/, par rapport aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de police signifie mettre à jour le CSS de l’une des trois manières suivantes: Modifiez les variables @ icon-font-path et/ou @ icon-font-name dans les fichiers source Less. Utilisez l'option d'URL relative fournie par le compilateur Less. Changez les chemins url () dans le CSS compilé. Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.
Sinon, il se peut que vous ayez oublié de copier le dossier des polices dans le répertoire racine
Remarque: ci-dessous est probablement un scénario de niche, mais je voulais le partager au cas où quelqu'un d'autre le trouverait utile.
Dans un projet Rails, nous en réutilisons beaucoup par le biais d'un joyau qui est un moteur Rails utilisant bootstrap-sass. Tout allait bien dans le projet principal à l'exception de la résolution du chemin de polices glyphicon.
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
Nous avons constaté que $bootstrap-sass-asset-helper était false pendant la résolution, alors que nous nous attendions à ce que ce soit vrai, le chemin était donc différent.
Nous avons provoqué l’initialisation du $bootstrap-sass-asset-helper dans la gemme moteur en procédant comme suit:
// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";
par exemple. cela a amené le chemin à résoudre pour:
/assets/bootstrap/glyphicons-halflings-regular.woff
Encore une fois, cela ne devrait pas être nécessaire dans tout projet Rails normal utilisant bootstrap-sass, nous réutilisons beaucoup de vues et cela a fonctionné pour nous. J'espère que cela peut aider quelqu'un d'autre.
j'avais un code de largeur de boîte\e094 pour glyphicon-arrow-down, en fait, j'ai résolu le problème en ajoutant glyphicon en classe css comme celle-ci:
<i class="glyphicon glyphicon-arrow-down"></i>
si cela pouvait aider quelqu'un ...
J'ai eu ce problème et il a été causé par le fichier variables.less. Le fait de le remplacer pour définir la valeur icon-font-path a résolu le problème.
Le fichier structuré ressemble à ceci:
\Content
\Bootstrap
\Fonts
styles.less
variables.less
L'ajout de mon propre fichier variables.less à la racine du contenu et son référencement dans styles.less ont résolu l'erreur 404.
Variables.less contient:
@icon-font-path: "fonts/";
Assurez-vous de ne pas trop spécifier la famille de polices, par exemple
*{font-family: Verdana;}
enlèvera la police de demi-lune de i elements.
J'ai eu Bootstrap de NuGet. Lorsque j'ai publié mon site, les glyphes ne fonctionnaient pas.
Dans mon cas, je l'ai fait fonctionner en définissant l'action de construction pour chacun des fichiers de police sur "Contenu" et en "Copier toujours".
J'avais le même problème où le navigateur était incapable de trouver les fichiers de police. Mon problème était dû à des exclusions dans mon fichier .htaccess qui étaient des listes blanches qui ne devaient pas être envoyées à index.php pour traitement. Comme le fichier de police ne pouvait pas être chargé, les caractères ont été remplacés par BLOB.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Comme vous pouvez le constater, les fichiers tels que images, rss et xml sont exclus de la réécriture, mais les fichiers de polices sont des fichiers .woff et .woff2. Ils devaient donc également être ajoutés à la liste blanche.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
L'ajout de woff et woff2 à la liste blanche permet le chargement des fichiers de polices. Les glyphicons doivent alors s'afficher correctement.
Je viens de renommer la police de bootstrap.css en utilisant Ctrl + C, Ctrl + v et cela a fonctionné.
Ce qui a fonctionné pour moi a été de remplacer les itinéraires de:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
à
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Vous devez définir par cet ordre:
<link rel="stylesheet" href="path/bootstrap.min.css">
<style type="text/css">
@font-face { font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }
</style>
C’est ainsi que vous incluez l’icône dans bootstrap 3
<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/
J'espère que ça t'as aidé.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}
J'utilise bootstrap avec l'espace de noms et les glyphicons ne fonctionnant pas, mais après l'ajout de la ligne ci-dessus dans les glyphicons de code fonctionnant correctement.
Vous devez définir par cet ordre:
<link rel="stylesheet" href="path/bootstrap.min.css">
<style type="text/css">
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
</style>
J'ai eu ce problème lors de l'utilisation d'un fragment Web dans Eclipse. Les fichiers de police étaient corrompus lorsqu’ils étaient intégrés au fichier JAR de fragment Web. Copier les fichiers de police dans le projet où le fragment était utilisé a résolu le problème.
Cette réponse est destinée à toute personne utilisant Nancy (NancyFx).
J'ai une application NancyFX hébergée sur ASP.NET et j'ai obtenu Boostrap via NuGet.
Mes glyphiques ne fonctionnaient pas, mais il s'est avéré que ce n'était pas un problème de fichiers de polices défectueux, de chemins de répertoire relatifs CSS incorrects ou de tout autre élément mentionné dans les autres réponses.
Le problème était qu'il me manquait une convention, disant à Nancy où chercher du contenu. Une fois que j'ai compris cela, la solution consistait simplement à ajouter la surcharge suivante à mon fichier d'amorçage:
protected override void ConfigureConventions(NancyConventions nancyConventions)
{
base.ConfigureConventions(nancyConventions);
nancyConventions.StaticContentsConventions.Add(
StaticContentConventionBuilder.AddDirectory("/fonts"));
nancyConventions.StaticContentsConventions.Add(
StaticContentConventionBuilder.AddDirectory("/Scripts"));
}
Si vous utilisez un CDN pour les fichiers CSS bootstrap, il se peut que les fichiers glyphes en soient la cause (par exemple glyphicons-halflings-regular.woff ) proviennent également du CDN.
Dans mon cas, j'ai rencontré ce problème en utilisant le CDN de Microsoft, mais le passage à MaxCDN l'a résolu.
Si vous utilisez Visual Studio (2015, dans mon cas) pour créer une application Web ASP.NET Webforms, avec le thème Bootstrap, les glyphiques sont par défaut stockés dans le dossier/fonts situé à la racine du projet.
Si vous commencez à réorganiser vos fichiers bootstrap sous/Content dans des sous-dossiers (pour prendre en charge plusieurs thèmes, par exemple), toutes les références de bootstrap à ../fonts/ se briseront. Vous pouvez déplacer le dossier des polices vers le chemin relatif approprié sous /Content, ou bien renommer toutes les références de ../fonts à /fonts.
Vérifiez si c'est glyphicons-halflings-regular.woff et pas glyphiconshalflings-regular.woff
J'ai également rencontré le même problème, CSS était bien et il n'y avait aucun problème. Il avait également toutes les polices incluses.
Mais le problème n'a été résolu qu'après avoir installé le "glyphicons-halflings-regular.ttf". J'ai commencé à obtenir des icônes correctement sur l'interface utilisateur.
Téléchargez le package complet/non personnalisé à partir de ce site et remplacez votre fichier de polices par des polices de packages non personnalisées. Sa volonté fixée.
Je travaille avec VS2015, ASP.NET MVC 6 (RC) et j'ai également eu des problèmes (messages d'erreur avec la référence, icônes non affichées) avec les gliphicons dans production (où il a travaillé dans VS (développement)).
La raison semble être que la page MS cdn est en panne (du moins pour le moment et depuis la Suisse): http://www.websitedown.info/ajax.aspnetcdn.com
Par conséquent (en tant que solution temporaire), j'ai changé la référence externe dans _Layout.cshtml (sous environment names = "Staging, Production") en une référence "interne":
de:
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
à
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"
Après cela, cela fonctionne à nouveau.
Je travaille avec Angular2 et SCSS. En règle générale, je ne copiais dans mon projet que les fichiers bootstrap que je modifie, les autres étant importés node_modules .. le seul problème était avec Glyphicons. Après plusieurs tentatives, j’ai trouvé que la meilleure solution pour moi était de copier les fichiers de police dans mon projet et de définir directement ce chemin sur $ icon-font-path comme indiqué dans l'image:
Aucune des réponses précédentes ne fonctionne pour moi ....
Le problème était que j'essayais <span class="icones glyphicon glyphicon-pen"> et au bout d'une heure, je me suis rendu compte que cette icône n'était pas incluse dans le pack Bootstrap _! Alors que l'icône de l'enveloppe fonctionnait bien ..
J'ai dû créer des conditions de réécriture pour les autoriser:
RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)