Bootstrap 3 Glyphicons ne sont pas de travail

J'ai eu le même problème et ne pouvais pas trouver toutes les informations à ce sujet, sauf dans le secret des commentaires sur cette page. Mes fichiers de police ont été chargement amende en fonction de Chrome, mais les icônes n'étaient pas affichés correctement. Je suis en train de faire de cette question une réponse de sorte qu'il sera, nous l'espérons aider les autres.

Quelque chose n'allait pas avec les fichiers de police que j'ai téléchargé à partir de Bootstrap 3 personnalisation de l'outil. Pour obtenir les bonnes polices, aller à la Bootstrap page d'accueil et télécharger l'intégralité de l' .fichier zip. Extrait de les quatre fichiers de polices de caractères à partir de votre répertoire de polices et tout devrait fonctionner.

Dans mon cas, j'ai été faire un 404 pour glyphicons-les hobbits réguliers.woff, et non visible glyphicons sur les navigateurs mobiles.

Ressemble à il ya une certaine confusion sur le type MIME pour woff, plus d'un type MIME être acceptée par les différents navigateurs, mais l' W3C dit:

application/font-woff

Edit: Après avoir testé le type MIME suivants pour woff fonctionne sur tous les navigateurs actuellement:

application/x-font-woff

Edit: Dernière version de Bootstrap en ce moment (3.3.5) utilise .woff2 des polices avec le même résultat .woff, le W3C a encore la définition de la spécification mais pour le moment le type MIME semble être:

application/font-woff2

Si les autres solutions ne fonctionnent pas, vous pouvez essayer de l'importer Glyphicons partir d'une source externe, plutôt que de compter sur Bootstrap de tout faire pour vous. Pour ce faire:

Vous pouvez soit le faire en HTML:

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

Ou CSS:

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

De crédit à edsiofi de ce fil: Bootstrap 3 Glyphicons CA

Azure Sites web sont manquants woff MIME de configuration. Vous devez ajouter l'entrée suivante dans le web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Dans le cas où quelqu'un d'autre fini ici et en utilisant Bootstrap >= v4.0: glyphicon soutien est tombé

La partie pertinente de la note de version:

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

la version en amont de Glyphicons

Octicons

Police Impressionnant

Source: https://v4-alpha.getbootstrap.com/migration/#components

Si vous souhaitez utiliser glyphicons vous avez besoin de le télécharger séparément.

J'ai personnellement essayé de Police Impressionnant et il est assez bon. Ajout d'icônes est similaire à glypicon façon:

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

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

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

l'original a été

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

Il était à l'origine un problème

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

Vous pouvez ajouter cette ligne de code et fait.

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

Grâce.

Ci-dessous est ce qu'il fixe pour moi. J'ai été faire le "mauvais URI" erreur à l'aide de la console de Firebug. Les icônes ont été montrant que les E### nombres. J'ai dû ajouter un .htaccess dans mon 'polices' annuaire.

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Double Possible de: Téléchargeable police sur firefox: mauvais URI ou cross-site l'accès non autorisé

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

Dans un rails de projet, nous sommes en réutilisant un peu par le biais d'un joyau qui est un moteur Rails à l'aide de bootstrap-sass. Tout allait bien dans le projet principal, à l'exception de la glyphicon de la police de résolution de chemin.

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

Nous avons constaté que $bootstrap-sass-asset-helper était false lors de la résolution lorsque nous nous attendions à ce qu'il soit vrai, si le chemin était différent.

Nous avons fait le $bootstrap-sass-asset-helper être initialisée dans le moteur de gem par:

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

par exemple, cela a provoqué le chemin à résoudre:

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

Encore une fois, cela ne devrait pas être nécessaire en fonctionnement normal de rails de projet à l'aide de bootstrap-sass, nous viens de passer à la réutilisation de beaucoup de points de vue et cela a fonctionné pour nous. J'espère que cela peut aider quelqu'un d'autre.

J'ai eu ce problème et il a été causé par les variables.moins fichier. Primordial pour définir l'icône de-police-chemin de la valeur résolu le problème.

Le fichier structuré ressemble à ceci:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Ajoutant mes propres variables.moins fichier dans la racine de Contenu et le référencement de ce dans les styles.moins résolu l'erreur 404.

Variables.moins contient:

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

j'avais une largeur de la zone de code \e094 pour glyphicon-flèche vers le bas, en fait j'ai résolu le problème en ajoutant glyphicon en classe css comme ça :

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

si ça peut aider quelqu'un ...

J'ai eu le même problème lorsque le navigateur n'a pas pu trouver les fichiers de police, et mon problème était dû à des exclusions dans mon .fichier htaccess qui a une liste blanche de fichiers qui ne doivent pas être envoyés à index.php pour le traitement. Comme le fichier de police ne pouvaient pas être chargés les personnages ont été remplacés par des 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 des images, des flux rss et xml sont exclus de la réécriture, mais les fichiers de police sont .woff et .woff2 fichiers, de sorte que ces également besoin de l'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]

Ajoutant woff et woff2 à la liste blanche permet à la police de fichiers à charger, et les glyphicons devrait alors s'afficher correctement.

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

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

Je suis en utilisant bootstrap avec l'espace de noms et glyphicons pas de travail mais après l'ajout au-dessus de la ligne dans le code glyphicons fonctionne bien.

Vous devez définir par cette commande:

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

Si vous êtes en utilisant un CDN pour le bootstrap CSS fichiers, il peut être le coupable, que la glyphe de fichiers (ex: glyphicons-les hobbits réguliers.woff) sont prises à partir de la CA ainsi.

Dans mon cas, j'ai été confronté à ce problème à l'aide de Microsoft CDN, mais le passage à MaxCDN résolu.

Si vous utilisez Visual Studio (2015, dans mon cas) pour créer un ASP.NET Webforms Application Web, avec Bootstrap thématisation, par défaut, les glyphicons sont stockés dans le dossier fonts hors de la racine du projet.

Si vous commencez à déplacer vos fichiers d'amorçage sous /Contenus dans des sous-dossiers (à l'appui de plusieurs thèmes, par exemple), toutes les références à l'intérieur d'amorçage de ../fonts/ de casser. Vous pouvez déplacer le dossier des polices à la appropriée de chemin d'accès relatif sous /Content, ou bien renommer toutes les références de ../fonts à /fonts.

J'ai dû créer quelques réécrire les conditions pour leur permettre:

RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)

J'ai aussi été confronté au même problème, CSS était bien et il n'y a pas de problème.
Il y avait aussi tous les polices incluses.

Mais le problème a pu être réglée qu'après que j'ai installé le "glyphicons-halflings-regular.ttf" j'ai commencé à avoir des icônes correctement sur l'INTERFACE utilisateur.

Vérifier si il est glyphicons-halflings-regular.woff et pas glyphiconshalflings-regular.woff

Le problème que j'ai en face impliqués Mac/PC de conversion. J'ai reçu un modèle à partir de nos développeurs, qui avait des images, les polices, les glyphicons et tout le reste vous pouvez penser. Le problème peut être vu lorsque vous chargez les fichiers sur un PC. Les noms de fichiers sera vert par défaut. Cela signifie qu'ils ne fonctionnent pas. Vous obtiendrez raw HTML avec des liens brisés.

Voici la solution rapide. Zip de tous les fichiers que vous avez reçus, et de l'extraire dans un dossier différent. Tous les noms de fichiers seront désormais en noir et fonctionnera parfaitement.

Bonne chance.

Par exemple si vous voulez l'icône de glyphicon-chevron-gauche

Essayez d'ajouter class="glyphicon glyphicon-chevron-left"