web-dev-qa-db-fra.com

Bootstrap3 - Les glyphiques ne sont pas affichés dans Chrome uniquement.

Étrangement, aucun des glyphicons Bootstrap3 ne s'affiche dans Chrome v31 (affiche un petit carré). Mais cela fonctionne très bien dans FF v26, Opera v18, Safari v5.1 et IE v10. En outre, fonctionne bien dans 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

google-chromebrowsertwitter-bootstrap-3glyphicons
8
lupchiazoem

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

  1. Faites un clic droit sur l'élément et choisissez "Inspecter l'élément". Cela fera apparaître une fenêtre vous montrant des informations utiles sur le code HTML et CSS qui lui sont appliquées.
  2. Si c'est une image Sprite (comme dans Bootstrap 2), regardez le CSS à droite, à la recherche du background-image le plus haut (non barré). Voir l'URL pour l'image Sprite. S'il s'agit d'un glyphicon (comme dans Bootstrap 3), cherchez plutôt le font-family.
  3. Allez sur l'onglet Réseau. Vous devrez peut-être actualiser la page pour y trouver des informations utiles.
  4. Recherchez où il a chargé cette image ou police de sprite (par exemple, glyphicons-halflings-regular.woff). Si le statut "304" est indiqué, cela signifie qu'il a été chargé à partir du cache. Dans ce cas, vider le cache et recharger la page peut résoudre votre problème.
  5. S'il ne s'agissait pas d'un statut "304", vous pourriez avoir un problème lorsque le serveur Web ne diffuse pas l'image (un statut "404" ou un statut similaire) ou qu'il ne s'affiche pas correctement pour une raison quelconque. 
  6. Si la suppression du cache n'a pas résolu le problème, cliquez sur l'URL de l'image ou de la police Sprite sous l'onglet Réseau, puis cliquez sur l'onglet "Aperçu". Ce que vous devriez voir, c'est une image de bloc contenant votre icône et toutes les autres icônes, ou les caractères alphanumériques de cette police. Si ce n'est pas ce que vous voyez, encore une fois, il y a probablement un problème avec ce que votre serveur Web sert. 
  7. Si l'image Sprite est correcte, il y a probablement quelque chose qui ne va pas dans votre CSS: vous remplacez accidentellement la position d'arrière-plan du Sprite. Encore une fois, retournez à votre onglet Éléments et regardez le CSS qui est généré.
30
Paul Tomblin

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

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

Le problème est que les CSS utilisent d’autres chemins relatifs vers d’autres fichiers. Par conséquent, vous pouvez faire 2 choses:
1. Téléchargez tous les chemins relatifs .
2. Vous pouvez simplement utiliser le lien hypertexte (plus facile).

10
Gines Hidalgo

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

  1. Allez dans votre dossier CSS.
  2. Ouvrez le fichier bootstrap.min.css.
  3. Recherchez le texte de glyphicon dans cela.
  4. Vous pouvez trouver son adresse URL.
  5. Vous devez modifier le nom du dossier font en fonts.
  6. Allez et profitez de votre vie. :)
1
mohsen Irani

Mon .htaccess dans/wp-content a provoqué l'erreur en raison d'une restriction de type de fichier. Après avoir ajouté woff2 à la liste des types de fichiers autorisés, tout fonctionne à nouveau correctement.

# 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>
1
Browsergirl

Il semble qu'il s'agisse d'un bogue dans WebKit, qui a été signalé ici: https://bugs.webkit.org/show_bug.cgi?id=76152

En outre, le créateur de GlyphIcons se dit conscient de ce problème et tentera d’utiliser différentes valeurs Unicode dans la prochaine version pour contourner ce bogue: https://Twitter.com/glyphicons/status/423426740128854016

1
Chris Barr

Note aux lecteurs: lisez bien les commentaires de @ user2261073 comment et @ Jeff concernant un bogue dans le personnaliseur. C'est probablement la cause de votre problème.

Le fichier de police n'est pas chargé correctement. Vérifiez si les fichiers sont à 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 s'agir d'un problème de type MIME. Les outils de développement de Chrome affichent les polices téléchargées dans l'onglet Réseau:

1
Shiv Singh

Lorsque l'en-tête de réponse de la police est"Content-Type: text/html; charset = UTF-8"le chrome v38 + aura un problème pour afficher les glyphicons d'amorçage, il sera résolu si"Type de contenu: application/font-woff"

0
Jack

Son problème de versioning principalement de démarrage et tout simplement j'ai ajouté ci-dessous URL.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
0
mazhar 124

J'ai découvert qu'en inspectant le fichier CSS de bootstrap.min.css que l'emplacement du répertoire pour les "polices" avait été ajouté, ce qui signifiait qu'il appelait des fichiers qui n'existaient pas car les noms de fichiers ne contenaient pas ces espaces. Par exemple, il était répertorié tout au long de chacun comme

../fonts/glyphicons - halfelins - regular.eot

quand cela aurait dû être

.. /fonts/glyphicons-halflings-regular.eot

Une fois les espaces supprimés, le fichier CSS chargé, le contenu du navigateur et le rechargement (bouton F5), les glyphicons sont finalement arrivés. Avant de supprimer les espaces supplémentaires, la seule autre option qui a fonctionné pour moi était celle proposé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 des espaces supplémentaires corrige le problème, cette option n'est plus nécessaire.

0
Eric Patterson

Vous devez télécharger le dossier des polices de démarrage, et dans votre fichier bootstrap.min.css, vous pouvez trouver un chemin tel que ../fonts pour glyphicon. bootstarp.min.css.

prendre plaisir :)

0
Laxmikant