Vos Glyphicons Bootstrap ne fonctionnent pas : voici une solution
Si vous ne parvenez pas à afficher les icônes de Bootstrap, ce problème peut venir du fichier contenant ces icônes, ou bien de l'interprétation de l'un des fichiers par le serveur.
Lors de l'utilisation du framework CSS Bootstrap 3, il est possible d'utiliser les icônes du thème Glyphicon pour son site web. Si vous obtenez un message d'erreur et si vous ne parvenez pas à afficher les icônes sur votre site, ce problème peut venir du fichier contenant les icônes, ou bien de l'interprétation de l'un des fichiers par le serveur.
La première vérification à faire porte sur l'emplacement des fichiers de police. Il faut vérifier qu'ils existent dans l'emplacement dans lequel ils sont chargés. Voici la ligne CSS qui appelle les icônes :
@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');
}
La première erreur potentielle se situe au niveau des fichiers de police. Si vous utilisez l'outil pour télécharger une version customisée de Bootstrap, alors les fichiers contenant les icônes sont peut-être corrompus. Pour corriger ce problème, téléchargez la version complète de Bootstrap. Remplacez vos fichiers de police par ceux contenus dans la version complète, et le problème sera résolu.
Si les fichiers ne sont pas corrompus, le problème peut venir de votre serveur. Le fichier utilisé pour afficher les icônes est un fichier woff. C'est un format plutôt rare, et il est possible que le serveur ne connaisse pas ce type de fichier. Pour confirmer ce problème, il faut ouvrir les outils de développement et charger la page. Dans l'onglet réseau, cherchez la ligne correspondant au fichier glyphicons-halflings-regular.woff, et regardez le type MIME affiché. Si ce type est application/octet-stream, alors votre serveur ne connaît pas ce type de fichier et l'interprète mal. Pour corriger cette erreur, il faut ouvrir le fichier contenant les types MIME gérés par le serveur et ajouter le type MIME pour les fichiers woff :
.woff application/x-woff
Le W3C conseille d'utiliser application/font-woff, mais la notation application/x-font-woff est gérée par plus de navigateurs.