Bootstrap 3 incapable d’afficher correctement le glyphicon

Je migre de bootstrap 2.3 à bootstrap 3 et tout fonctionne bien. Mais lorsque j’ai essayé d’append des icons, la police de l’icône ne s’affiche pas correctement. J’ai essayé de regarder ici http://bootply.com/61521 et seul «.glyphicon-envelope» était affiché correctement. D’autres ont affiché comme «E001» et ainsi de suite.

Comment puis-je résoudre ce problème?

Pour les autres navigateurs, les glyphicons sont affichés correctement, seul Firefox est incapable de l’afficher correctement.

OK, mon problème n’a pas été répondu par ce qui précède. J’avais le dossier de fonts au même endroit que les dossiers bootstrap css et js (par exemple / theme / bootstrap3 / ..), mais il cherchait le dossier de fonts dans la racine (par exemple / fonts / glyph .. .woff)

La solution pour moi était de définir la variable @ icon-font-path sur le chemin relatif correct:

Par exemple, @ icon-font-path: “fonts /”;

Avez-vous choisi la version personnalisée de Bootstrap? Il y a un problème avec les fichiers de fonts inclus dans le package personnalisé (voir https://github.com/twbs/bootstrap/issues/9925 ). Si vous ne souhaitez pas utiliser le CDN, vous devez les télécharger manuellement et remplacer vos propres fonts par celles téléchargées:

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

Après cela, essayez un rechargement fort (CTRL + F5), en espérant que cela vous aidera.

les icons et le css sont maintenant séparés du bootstrap. voici un violon qui vient d’une autre réponse stackoverflow

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css"); 

http://jsfiddle.net/aQrPd/1/

Bootstrap 3 Glyphicons CDN

Voici le correctif qui a fonctionné pour moi. Firefox a une politique d’origine de fichier qui provoque cela. Pour corriger, procédez comme suit:

  1. ouvert sur: config dans firefox
  2. Recherchez la propriété security.fileuri.ssortingct_origin_policy et remplacez-la par ‘true’ en ‘false’.
  3. Voial! tu es prêt!

Détails: http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts

Vous ne verrez ce problème que lors de l’access à un fichier à l’aide du protocole file: ///

J’ai eu le même problème en utilisant un serveur Apache local. Ceci a résolu mon problème:

http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons

Pour Amazon s3, vous devez modifier votre configuration CORS:

   * GET 3000 Authorization   

Tout d’abord, j’essaie d’installer les fonts glyphicons de manière “officielle”, avec le fichier zip. Je ne pouvais pas le faire.

Ceci est ma solution étape par étape:

  1. Accédez à la page Web de Bootstrap, puis à la section “Composants”.
  2. Ouvrez la console du navigateur. Dans Chrome, Ctrl + Maj + C.
  3. Dans la section Ressources, dans Frames / getbootstrap.com / Fonts, vous trouverez la police qui exécute les glyphicons. Il est recommandé d’utiliser le mode privé pour éviter le cache.
  4. Avec l’URL du fichier de police (cliquez avec le bouton droit sur le fichier affiché dans la liste des ressources), copiez-le dans un nouvel onglet et appuyez sur ENTRÉE. Cela va télécharger le fichier de police.
  5. Copiez une autre fois l’URL dans un onglet et changez l’extension de police en eot, ttf, svg ou woff, ass vous plait.

Cependant, pour un access plus facile, c’est le lien du fichier woff.

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

J’ai fini par passer aux icons Font-Awesome. Ils sont tout aussi bons sinon meilleurs, et tout ce que vous avez à faire est de créer un lien dans la police, des jours heureux.

Assurez-vous que le nom du dossier contenant le nom de la police est “fonts” et non “font”

vous pouvez utiliser tag comme ceci:

  

Au cas où :

Par exemple, je viens d’essayer et après 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’espère que cela t’aides

Comme d’autres l’ont noté, le personnaliseur présente certains problèmes.

J’avais des problèmes avec les glyphicons non plus, ainsi que des problèmes avec la disposition de la barre de navigation.

J’ai utilisé la suggestion et téléchargé les fonts du zip complet / écrasé celles de la version personnalisée et corrigé les problèmes d’icons.

J’ai également extrait le CSS et le javascript du CDN au lieu de ma copie locale du CDN. Cela a corrigé mes problèmes de navbar.

Je recommande donc de ne pas utiliser la version personnalisée tant que vous ne maîsortingsez pas Bootstrap, car vous risquez d’obtenir des résultats frustrants et indésirables.

Pour moi, placer mon dossier de fonts par emplacement spécifié dans bootstrap.css a résolu le problème

La plupart du temps, son dossier de fonts doit se trouver dans le répertoire parent du fichier bootstrap.css.

J’ai fait face à ce problème et recherché de nombreuses réponses, si quelqu’un encore en 2015 est confronté à ce problème, il s’agit alors soit d’un problème CSS, soit d’une incompatibilité d’emplacement pour les fichiers.

Le bug a déjà été résolu par bootstrap

Ceci est la documentation officielle à l’appui des réponses ci-dessus.

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

Autre que cette erreur, les nouveaux utilisateurs le feraient après avoir téléchargé le fichier zip bootstrap à partir du site officiel. Ils auraient tendance à ignorer le dossier des fonts pour les copier dans leur configuration de développement. Le dossier des fonts manquantes peut également entraîner ce problème

  1. Essayez d’utiliser CDN
  2. Essayez de définir l’en-tête HTTP Access-Control-Allow-Origin