Bootstrap 3 incapable d'afficher correctement glyphicon

avez-vous choisi la version personnalisée de Bootstrap? Il y a un problème que les fichiers de police inclus dans le paquet personnalisé sont cassés (voir https://github.com/twbs/bootstrap/issues/9925 ). Si vous ne voulez pas utiliser le CDN, vous devez les télécharger manuellement et remplacer vos propres polices avec 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 essayer une recharge forte (CTRL + F5), espérer qu'il aide.

les icônes et les css sont maintenant séparées de bootstrap. voici un violon qui vient 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 /

Bootstrap 3 Glyphicons CDN

voilà la solution qui a fonctionné pour moi. Firefox a une politique d'origine de fichier qui cause cela. Pour fixer faire les étapes suivantes:

1. ouvrir le about:config de firefox
2. trouver la sécurité.fileuri.la propriété strict_origin_policy et changez-la de’ true ‘en ' false.
3. Voial! tu es prêt à partir!

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

vous ne verrez ce problème que lorsque vous accéderez à un fichier en utilisant file: / / / protocol

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 éditer votre configuration CORS:

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

tout d'Abord, j'essaie d'installer les glyphicons polices par le "officiel", avec le fichier zip. Je ne pouvais pas le faire.

C'est mon étape-par-étape de la solution:

1. allez à la page Web de Bootstrap et ensuite aux" composants" section.
2. ouvrez la console du navigateur. En Chrome, Ctrl+Shift+C. 151960920"
3. Dans la section Ressources, à l'intérieur de Cadres/getbootstrap.com/Polices que vous trouver de la police qui est en fait l'exécution de la glyphicons. C'est recommandé d'utiliser le mode privé pour éviter le cache.
4. avec URL de le fichier de police (clic droit sur le fichier a montré sur la liste des ressources), le copier dans un nouvel onglet et appuyez sur ENTRÉE. Cela permettra de télécharger la police fichier.
5. copiez une autre fois l'URL dans un onglet et changez la police l'extension à la fin de la bande, ttf, svg ou woff, cul 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

j'ai fini par passer aux icônes de police-impressionnant. Ils sont tout aussi bons si ce n'est mieux, et tout ce que vous devez faire est lien dans la police, happy days.

assurez-vous que le nom du dossier qui contient le nom de la police est "fonts" et non "font"

vous pouvez utiliser tag comme ceci:

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

Juste au cas où :

par exemple, je viens de teindre <span class="icones glyphicon glyphicon-pen"> et après une heure j'ai réalisé que cette icône n'était pas incluse dans le pack de bootstrap !! Pendant que l'icône d'enveloppe fonctionnait bien..

Espérons que cette aide

comme d'autres l'ont fait remarquer, il y a des problèmes avec le customizer.

j'ai eu des problèmes avec les glyphicons ne montrant ni l'un ni l'autre, ainsi que des problèmes avec la disposition navbar.

j'ai utilisé la suggestion et j'ai téléchargé les polices à partir de la pleine zip/overwrite ceux de la version personnalisée et qui a corrigé les problèmes d'icônes.

j'ai aussi tiré dans le CDN CSS et javascript au lieu de ma copie locale du CDN. Ce ma navbar questions.

donc je recommande jusqu'à ce que vous obtenez le coup de Bootstrap, de ne pas utiliser la version personnalisée, car vous pourriez obtenir des résultats frustrants, indésirables.

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

la plupart du temps son dossier polices devrait être dans le répertoire parent de bootstrap.fichier css .

j'ai fait face à ce problème , et la recherche de nombreuses réponses , si quelqu'un encore en 2015 fait face à ce problème , alors c'est soit un problème CSS, ou l'inadéquation de l'emplacement pour les fichiers .

le bug a déjà résolu par bootstrap

il s'agit de la documentation officielle à l'appui des réponses ci-dessus.

Modification de l'emplacement des caractères de l'icône Bootstrap suppose que les fichiers de police d'icône seront localisés dans le ../ fonts / directory, relatif aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de police signifie Mettre à jour le CSS de l'une des trois façons suivantes:: Changez les variables @icon-font-path et/ou @icon-font-name dans les fichiers source Less. Utilisez L'option relative URLs fournie par le compilateur Less. Modifier la url () chemins dans le CSS compilé. Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.

autre que celle-ci une erreur que les nouveaux utilisateurs feraient est, après avoir téléchargé le zip bootstrap à partir du site officiel. Ils auraient tendance à sauter le dossier fonts pour copier dans leur configuration dev. donc le dossier de polices de caractères manquant peut aussi conduire à ce problème

1. Essayez d'utiliser "CDN
2. essayer de définir L'en-tête HTTP Access-Control-Allow-Origin