Les glyphicons Bootstrap 3 ne fonctionnent pas

J'ai téléchargé bootstrap 3.0 et je n'arrive pas à faire fonctionner les glyphicons. J'obtiens une sorte d'erreur "E003". Des idées pourquoi cela se produit? J'ai essayé à la fois localement et en ligne et j'ai toujours le même problème.

J'avais le même problème et je n'ai trouvé 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 donc j'espère que cela aidera les autres.

Quelque chose n'allait pas avec les fichiers de police que j'ai téléchargés depuis l'outil de personnalisation de Bootstrap 3. Pour obtenir les polices correctes, accédez à la page d'accueil de Bootstrap et téléchargez le fichier .zip complet. Extrayez les quatre fichiers de polices à partir de là vers votre répertoire de polices et tout devrait fonctionner.

Note aux lecteurs: assurez-vous de lire le commentaire de @ user2261073 et la réponse de @ Jeff concernant un bogue dans le personnalisateur. C'est probablement la cause de votre problème.

Le fichier de police n'est pas chargé correctement. Vérifiez si les fichiers se trouvent à leur 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 peut é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, j'obtenais un 404 pour les glyphicons-halflings-regular.woff et les glyphicons non visibles sur les navigateurs mobiles.

Il semble qu'il y ait une certaine confusion au sujet 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 pour woff fonctionne sur tous les navigateurs actuellement:

application/x-font-woff

Edit: la dernière version de Bootstrap à l'heure actuelle (3.3.5) utilise des polices .woff2 avec le même résultat initial que .woff, le W3C définissant toujours 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 Fontdossier DOIT être au même niveau que votre dossier CSS. La correction du chemin d'accès bootstrap.css ne fonctionnera pas .

Bootstrap.cssdoit naviguer vers le Fontsdossier 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, vous voudrez peut-être essayer d'importer des glyphicons à partir d'une source externe, plutôt que de compter sur Bootstrap pour tout faire pour vous. Pour faire ça:

Vous pouvez soit le faire en HTML:

<link href="https://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")

Crédit à edsiofi de ce fil: Bootstrap 3 Glyphicons CDN

Si quelqu'un d'autre se retrouve ici et utilise Bootstrap> = v4.0: le support du glyphicon est abandonné

La partie pertinente des notes de version:

Suppression de la police d'icône Glyphicons. Si vous avez besoin d'icônes, certaines options sont:

la version amont des Glyphicons

Octicons

Police Awesome

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 méthode glypicon:

<i class="fas fa-chess"></i>

Je regardais à travers cette vieille question à moi et puisque ce qui était censé être la bonne réponse jusqu'à présent, a été donnée par moi dans les commentaires, je pense que j'en mérite aussi le mérite.

Le problème résidait dans le fait que les fichiers de polices glyphicon téléchargés à partir de l'outil de personnalisation de bootstrap n'étaient pas les mêmes que ceux téléchargés à partir de la redirection trouvée sur la page d'accueil de bootstrap. Ceux qui fonctionnent comme ils le devraient sont 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 remplacer les polices à partir du lien ci-dessus.

Les sites Web Azure n'ont pas de configuration woff 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 décrit @Stijn, l'emplacement par défaut dans Bootstrap.cssest incorrect lors de l'installation de ce package à partir de Nuget.

Modifiez cette section pour qu'elle ressemble à 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');
}

Vous pouvez ajouter cette ligne de code et c'est fait.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Merci.

IIS ne serveur pas de .wofffichiers par défaut, donc dans IIS vous devrez ajouter une <mimeMap>entrée à votre web.configfichier;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

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

J'ai modifié mon fichier less variables.less J'ai modifié la variable

@icon-font-path:          "fonts/";    

l'original était

@icon-font-path:          "../fonts/"; 

Cela causait un problème

Cela est dû à un mauvais codage dans bootstrap.css et bootstrap.min.css. Lorsque vous téléchargez Bootstrap 3.0 à partir du personnalisateur, 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');
}

Puisque c'est le code principal pour utiliser les Glyphicons, cela ne fonctionnera pas ofc ...

Téléchargez les fichiers css à partir 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. L'important était celui qui causait des problèmes.

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 d'icônes (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 qui l'a corrigé pour moi. J'obtenais une erreur «mauvais URI» en utilisant la console Firebug. Les icônes apparaissaient sous forme de numéros E ###. J'ai dû ajouter un fichier .htaccess dans mon répertoire 'fonts'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Copie possible de: Police téléchargeable sur firefox: mauvais URI ou accès intersite 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 à partir de SASS en utilisant gulp-sassou grunt-sassie. node-sass. Assurez-vous que vos modules de nœuds sont à jour, surtout si vous travaillez sur un projet assez ancien.

Il s'avère que depuis quelque temps, la directive SASS @at-rootest utilisée dans la définition des @font-faceglyphicons, voir https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/scssphicons .

Le gotcha ici est que node-sassie. libsassne soutiennent pas la @at-rootdirective si elle est trop ancienne. Si tel est le cas, vous obtiendrez un @font-faceenveloppé dans @at-rootlequel le navigateur ne sait pas quoi faire. Le résultat est qu'aucune police ne sera téléchargée et vous verrez probablement des ordures au lieu d'icônes.

Remarque: ci-dessous est probablement un scénario de niche, mais je voulais le partager au cas où quelqu'un d'autre pourrait le trouver utile.

Dans un projet de rails, nous réutilisons un peu à travers un joyau utilisé par un moteur Rails bootstrap-sass. Tout allait bien dans le projet principal, à l'exception de la résolution du chemin de police du glyphicon.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Nous avons constaté que $bootstrap-sass-asset-helperc'était falsependant la résolution lorsque nous nous attendions à ce que ce soit vrai, donc le chemin était différent.

Nous avons provoqué l' $bootstrap-sass-asset-helperinitialisation de la gemme moteur en faisant:

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

Par exemple, cela a conduit le chemin à se résoudre à:

/assets/bootstrap/glyphicons-halflings-regular.woff

Encore une fois, cela ne devrait pas être nécessaire dans tout projet de rails normal bootstrap-sass, il se trouve que nous réutilisons beaucoup de vues et cela a fonctionné pour nous. J'espère que cela peut aider quelqu'un d'autre.

Voici ce que dit la documentation officielle concernant les polices qui ne s'affichent pas.

Modification de l'emplacement des polices d'icônes Bootstrap suppose que les fichiers de polices d'icônes seront situés dans le répertoire ../fonts/, par rapport aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de polices signifie mettre à jour le CSS de trois manières: Modifiez les variables @ icon-font-path et / ou @ icon-font-name dans les fichiers Less sources. Utilisez l'option URL relative fournie par le compilateur Less. Modifiez les chemins url () dans le CSS compilé. Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.

Autre que cela, il se peut que vous ayez manqué de copier le dossier des polices dans le répertoire racine

J'ai eu ce problème et il a été causé par le fichier variables.less. Le remplacer pour définir la valeur de l'icône-police-chemin 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 le référencement dans styles.less ont résolu l'erreur 404.

Variables.less contient:

@icon-font-path:          "fonts/";

J'ai obtenu Bootstrap de NuGet. Quand j'ai publié mon site, les glyphes ne fonctionnaient pas.

Dans mon cas, je l'ai fait fonctionner en définissant l'action de génération pour chacun des fichiers de police sur «Contenu» et en les définissant sur «Copier toujours».

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 du glyphicon dans la classe css comme ça:

<i class="glyphicon  glyphicon-arrow-down"></i>

si cela pouvait aider quelqu'un ...

Assurez-vous de ne pas trop spécifier la famille de polices, par exemple

*{font-family: Verdana;}

supprimera la police halflings des éléments i.

Je rencontrais le même problème lorsque le navigateur n'a pas pu trouver les fichiers de polices et mon problème était dû à des exclusions dans mon fichier .htaccess qui constituait une liste blanche de fichiers qui ne devaient pas être envoyés index.phppour traitement. Comme le fichier de police n'a pas pu ê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 voir, les fichiers comme les images, rss et xml sont exclus de la réécriture, mais les fichiers de police le sont .woffet les .woff2fichiers, il fallait donc également les ajouter à 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 woffet woff2à la liste blanche permet de charger les fichiers de police et les glyphicons devraient alors s'afficher correctement.

Vous devez définir par cette commande:

<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>

Ce qui a fonctionné pour moi, c'était 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');
}

Voici comment inclure l'icône dans Bootstrap 3

<span class="glyphicon glyphicon-bell"></span>

http://glyphicons.bootstrapcheatsheets.com/

J'espère que cela pourra aider.

@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 fonctionnent pas, mais après avoir ajouté la ligne ci-dessus dans le code, les glyphicons fonctionnent correctement.

Je viens de renommer la police de bootstrap.css en utilisant Ctrl + c, Ctrl + v et cela a fonctionné.