Bootstrap3 - Glyphicons ne sont pas affichés dans le navigateur Chrome, seulement

Étrangement, aucun des Bootstrap3 glyphicons affiche dans Chrome v31(affiche un petit carré). Mais, fonctionne très bien dans les FF v26, Opéra v18, Safari v5.1 et IE v10. Aussi, fonctionne très bien sous Android 4.x - Chrome et FF.

Testé avec un code simple: <span class="glyphicon glyphicon-adjust"></span>

S'il vous plaît aider. Merci beaucoup d'avance!

Environnement: Windows 8.0

Clic droit sur le carré et choisir "Inspecter l'Élément". Il devrait vous dire beaucoup de choses intéressantes au sujet de la CSS qui a été appliqué, et si oui ou non les icônes ont été chargés.
Je l'ai fait mais, ne pas trouver quelque chose notable, sauf que Chrome a inséré :before entre span. S'il vous plaît laissez-moi savoir comment puis-je vérifier si les icônes ont été chargés ou non. Je ne suis pas dans l'INTERFACE utilisateur, le trouvant difficile...
Avoir un coup d'oeil pour le "background-image" CSS qui n'est pas barré, et regardez l'url. Ensuite, allez à l'onglet Réseau (vous pouvez avoir besoin de recharger la page) et de voir où cette image sprite est chargé. Les Chances sont qu'elle va avoir un statut de 304 sens, il a été chargé à partir du cache. Dans ce cas, essayez de vider votre cache. Si c'est un statut 404 ou autre chose, vous avez d'autres problèmes.
Le temps pour moi d'aller au lit 🙂 C'était un simple problème de cache. De toute façon, j'ai appris sur le débogage. Merci encore! Merci de poster votre dernier commentaire comme réponse, je vais accepter.
Je suis dans le pétrin après avoir vu vers le bas de votes que j'ai choisi la réponse est correcte, Wellington Zanelli commentaire(en effet, les Glyphicons sont de la police) et réponse de @Chris Barr, que l'effacement de la mémoire cache n'a résoudre mon problème(comme suggéré par Paul Tomblin dans le commentaire ci-dessus).

OriginalL'auteur lupchiazoem | 2014-01-03

  1. 30

    Plutôt que de résoudre votre problème, je préfère vous apprendre comment réparer votre propre problème.

    1. Clic droit sur l'élément et choisissez l'option "Inspecter l'Élément". Qui ouvrira une fenêtre vous montrant quelques informations utiles sur le html et le CSS qui s'applique à elle.
    2. Si c'est une image sprite (comme dans le Bootstrap 2), regarde le CSS sur le côté droit, à la recherche pour le plus haut (non barré) background-image. Voir l'url de l'image du sprite. Si c'est un glyphicon (comme dans le Bootstrap 3), cherchez les font-family à la place.
    3. Allez à l'onglet Réseau. Vous devrez peut-être actualiser la page pour obtenir des trucs utiles.
    4. Chercher où il chargé que le sprite de l'image ou de la police (par exemple, glyphicons-les hobbits réguliers.woff). Si il dit qu'il a un statut de "304", ce qui signifie qu'il a été chargé à partir du cache. Dans ce cas, l'effacement du cache et le rechargement de la page peut résoudre votre problème.
    5. Si ce n'était pas un "304" état, vous pourriez avoir un problème où le serveur web n'est pas de servir l'image (un "404" ou assimilés) ou il ne vient pas correctement pour une raison quelconque.
    6. Si l'effacement de la mémoire cache n'a pas de résoudre le problème, cliquez sur l'URL de l'image du sprite ou de la police sur l'onglet Réseau, puis cliquez sur "Aperçu" de l'onglet. Ce que vous devriez voir est un bloc de l'image qui contient votre icône et toutes les autres icônes, ou les caractères alphanumériques dans cette police. Si ce n'est pas ce que vous voyez, il n'y a probablement quelque chose de mal avec ce que votre serveur web est au service des.
    7. Si le sprite de l'image est correcte, alors il y a probablement quelque chose de mal avec votre CSS où vous avez accidentellement des raisons impérieuses le background-position du sprite. Encore une fois, revenir à vos Éléments de l'onglet et de regarder le CSS généré.
    Excellente réponse!
    Cette réponse ne s'applique pas aux Bootstrap 3. Dans le Bootstrap 3 les Glyphicons sont la police de base, pas de sprites comme vous l'avez dit.
    Ok, pour ceux d'entre vous qui sont incapables de comprendre comment prendre les conseils pour les sprites et les deux extrêmement mineures modifications à effectuer les travaux de conseil pour les glyphicons, j'ai indiqué pour vous.
    Certains glyphicons ne fonctionnent pas avec chrome(v32.0). Essayez de tester quelques-uns des différents glyphicons pour voir si c'est un chrome problème ou un serveur/code.
    Comme Chris notes, il y avait un bug dans le Bootstrap qui a été tolérée par la plupart des navigateurs (pour un temps), mais a cassé lorsque google Chrome a été mis à jour. Si vous utilisez la dernière version de glyphicons, pour de nombreux utilisateurs, le problème sera résolu. Par ailleurs, un utilisateur peut simplement utiliser un CDN et ainsi de contourner les problèmes dont vous parlez (cf. "Obtenir Bootstrap", CA section: getbootstrap.com/getting-started/#download)

    OriginalL'auteur Paul Tomblin

  2. 10

    J'ai eu le même problème. La solution la plus simple est d'importer directement le CSS de la hiperlink, ne pas le télécharger:

    <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    Le problème est que le CSS utiliser d'autres chemins d'accès relatifs à d'autres fichiers. Par conséquent, vous pouvez faire 2 choses:

    1. Télécharger tous les chemins d'accès relatifs.

    2. Vous pouvez tout simplement utiliser le lien (plus facile).

    OriginalL'auteur Gines Hidalgo

  3. 1

    Il semble que c'est un bug dans WebKit, ce qui a été rapporté ici: https://bugs.webkit.org/show_bug.cgi?id=76152

    Aussi, le créateur de GlyphIcons dit qu'il est conscient de ce problème et essaie d'utiliser différentes valeurs unicode dans la prochaine version de contourner ce bug: https://twitter.com/glyphicons/status/423426740128854016

    OriginalL'auteur Chris Barr

  4. 1

    Note aux lecteurs: pour être sûr de lire @user2261073 de l' commentaire et @Jeff répondre 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 sont dans leur 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 pourrait également être un type mime question. Chrome dev tools afficher des polices téléchargées dans l'onglet réseau:

    OriginalL'auteur Shiv Singh

  5. 1

    Mon .htaccess dans /wp-content causé l'erreur due à un type de fichier de restriction. Après j'ai ajouté woff2 à la liste des types de fichiers autorisés tout fonctionne bien à nouveau.

    # Protect /Wp-Content/
Order deny,allow
    Deny from all
    <Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
    Allow from all
    </Files>

    OriginalL'auteur Browsergirl

  6. 1

    J'ai eu le même problème que vous:

    1. Accédez à votre répertoire CSS.
    2. Ouvrir le bootstrap.min.css fichier.
    3. De recherche pour glyphicon texte.
    4. Vous pouvez trouver son adresse url.
    5. Vous devez changer le font le nom du dossier à fonts.
    6. Aller et de profiter de votre vie. 🙂

    OriginalL'auteur mohsen Irani

  7. 0

    Lorsque la police d'en-tête est "Content-Type:text/html; charset=UTF-8" le chrome v38+ aura des problèmes pour afficher le bootstrap glyphicons, il va résoudre ce si définir l'en-tête de réponse que "Content-Type:application/font-woff"

    OriginalL'auteur Jack

  8. 0

    Vous devez télécharger bootstrap dossier de polices, et dans votre fichier d'amorçage.min.css vous pouvez trouver le chemin d'accès comme ../fonts pour glyphicon, vous devez modifier ce chemin d'accès "fonts/" supprimer ../si votre dossier de polices est dans la même bootstarp.min.css .

    profiter 🙂

    OriginalL'auteur Laxmikant

  9. 0

    J'ai découvert que, lors de l'inspection de la CSS de bootstrap.min.css que l'emplacement du répertoire "fonts" avait ajouté des espaces qui signifiait qu'il était d'appel pour les fichiers qui n'existent pas parce que les noms de fichiers n'ont pas de ces espaces. Par exemple, il a été répertorié tout le chemin à travers chacun comme

    .. /fonts /glyphicons - les hobbits réguliers.eot

    quand il aurait dû être

    .. /fonts/glyphicons-les hobbits réguliers.eot

    Une fois que j'ai supprimé les espaces, re-téléchargé le CSS, vidé le cache du navigateur, et rechargé (touche F5) les glyphicons s'est finalement montré. Avant le retrait de l'espace supplémentaire, la seule autre option qui a fonctionné pour moi a été accordée par Gines Hidalgo, qui a suggéré de télécharger le fichier CSS via un lien hypertexte. Mais avec la découverte que la suppression d'espaces supplémentaires résout le problème que l'option n'est plus nécessaire.

    OriginalL'auteur Eric Patterson

  10. 0

    Surtout bootstrap versioning question et tout simplement, j'ai ajouté l'URL ci-dessous.

    <link  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>

    OriginalL'auteur mazhar 124

  11. -1

    Si elle permet, à l'aide de bootstrap.css au lieu de bootstrap.min.css résolu ce problème pour moi.

    Pourquoi n'utilisez-vous pas de la police impressionnant fortawesome.github.io/Font-Awesome faite pour bootstrap

    OriginalL'auteur coda