web-dev-qa-db-fra.com

Bootstrap 3 incapable d'afficher correctement le glyphicon

Je suis en train de migrer de bootstrap 2.3 à bootstrap 3 et tout fonctionne bien. Mais lorsque j'ai essayé d'ajouter des icônes, la police d'icônes ne s'affichait 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 être capable de résoudre ce problème?

Pour les autres navigateurs, les glyphicons sont affichés correctement, seul Firefox a été incapable de les afficher correctement.

css3twitter-bootstrap-3glyphicons
55
iSa

OK, mon problème n'a pas été résolu par ce qui précède. Le dossier de polices se trouvait au même emplacement que les dossiers bootstrap css et js (par exemple,/theme/bootstrap3/..), mais il recherchait le dossier de polices à 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 /";

29
brad

Avez-vous choisi la version personnalisée de Bootstrap? Un problème est que les fichiers de police inclus dans le package personnalisé sont cassés (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 polices par celles téléchargées:

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svghttps://netdna.bootstrapcdn.com/bootstrap/3.0. 0/fonts/glyphicons-halflings-regular.woffhttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-normal.ttfhttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

Après cela, essayez une recharge forte (CTRL + F5), espérons que cela vous aidera.

78
Toni

les icônes et les css sont maintenant séparés du bootstrap. voici un violon qui provient d'une autre réponse de stackoverflow

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

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

CDN Bootstrap 3 Glyphicons

40
Anton

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

  1. ouvrir à propos de: config dans firefox
  2. Recherchez la propriété security.fileuri.strict_Origin_policy et remplacez-la de "true" par "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'accès à un fichier à l'aide de fichier: /// protocole

11
hellojava

J'ai eu le même problème en utilisant un serveur Apache local. Cela 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:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
6
robodo

Tout d’abord, j’essaie d’installer les polices glyphicons de la manière "officielle", avec le fichier Zip. Je ne pouvais pas le faire.

Voici ma solution étape par étape:

  1. Allez sur la page Web de Bootstrap puis sur 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 contourner 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 téléchargera 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, comme vous le souhaitez.

Cependant, pour un accès plus facile, c’est le lien du fichier woff.

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

5
MARC.RS

J'ai fini par passer aux icônes 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.

3
Paul 501

assurez-vous que le nom du dossier contenant le nom de la police est "polices" et non "police"

2
Newbie

Au cas où :

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

1
538ROMEO

vous pouvez utiliser une balise comme ceci:

<i class="fa fa-edit"></i>
1
AzizAhmad

Pour moi, placer mon dossier polices selon l'emplacement spécifié dans le fichier bootstrap.css a résolu le problème.

Généralement, son dossier polices doit se trouver dans le répertoire parent du fichier bootstrap.css.

J'ai fait face à ce problème et, à la recherche de nombreuses réponses, si quelqu'un en 2015 était encore confronté à ce problème, il s'agissait soit d'un problème de CSS, soit d'une non-concordance d'emplacement pour les fichiers.

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

0
Divyanshu Jimmy

Ceci est la documentation officielle supportant les réponses ci-dessus.

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.

Une autre erreur que les nouveaux utilisateurs feraient serait, après le téléchargement du fichier bootstrap _ Zip, du site officiel. Ils auraient tendance à ignorer le dossier des polices à copier dans leur configuration de développement. n dossier de polices manquant peut donc également conduire à ce problème

0
gates

Comme d'autres l'ont noté, le personnaliseur pose certains problèmes.

J'avais des problèmes avec les glyphicons qui n'apparaissaient pas 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 polices du fichier Zip complet/écrasées celles de la version personnalisée, ce qui a résolu le problème des icônes.

J'ai également tiré dans le CSS CDN et javascript au lieu de ma copie locale du CDN. Cela a corrigé mes problèmes de barre de navigation.

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

0
trebor1979