Les glyphicons de Bootstrap 3 ne fonctionnent pas

Question

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

Answer 1

J'avais le même problème et je n'ai trouvé aucune information à ce sujet, sauf dans les commentaires cachés de cette page. Mes fichiers de police se chargeaient bien selon Chrome, mais les icônes ne s'affichaient pas correctement. J'ai décidé d'en faire une réponse afin d'aider d'autres personnes.

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, allez à l'adresse suivante Page d'accueil Bootstrap et téléchargez le fichier .zip complet. Extrayez les quatre fichiers de polices de ce fichier dans votre répertoire de polices et tout devrait fonctionner.

Answer 2

Note aux lecteurs : assurez-vous de lire Commentaire de @user2261073 y Réponse de @Jeff concernant un bug dans le customizer. 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 à 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 peut également s'agir d'un problème de mimetype. Les outils de développement de Chrome affichent les polices téléchargées dans l'onglet réseau :

Answer 3

Dans mon cas, je recevais un 404 pour glyphicons-halflings-réguliers.woff et des glyphicons non visibles sur les navigateurs mobiles.

Il semble qu'il y ait une certaine confusion au sujet du type MIME pour woff, plusieurs types MIME étant acceptés par différents navigateurs, mais le fichier 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 à ce jour (3.3.5) utilise des polices .woff2 avec le même résultat initial que .woff, le W3C a toujours définition de la spécification mais pour le moment le type MIME semble être :

application/font-woff2

Answer 4

-Si vous avez suivi la réponse la mieux notée et que cela ne fonctionne toujours pas. :

El Font dossier MUST être au même niveau que votre dossier CSS. En corrigeant le chemin dans bootstrap.css ne sera pas travail.

Bootstrap.css doit se rendre dans le Fonts dossier exactement comme ça :

@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');
}

Answer 5

Je regardais cette ancienne question et puisque ce qui était censé être la bonne réponse jusqu'à présent a été donné par moi dans les commentaires, je pense que je mérite aussi le crédit pour cela.

Le problème réside dans le fait que le 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 qui sont 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 mauvais fichiers de personnalisation devrait écraser les polices du lien ci-dessus.