Glyphicons rendu comme boîte vide
Je suis l'aide de l'excellent Twitter bootstrap bibliothèque avec Glyphicons, cependant, toutes les icônes sont rendu sous forme de carrés vides, comme suit:
J'ai téléchargé les Glyphicons polices à ma racine du site web et a changé le bootstrap.css
fichier à point à leurs emplacements corrects, j'ai vérifié parce qu'ils ont 200 OK
demandes dans google Chrome dev tools:
C'est le balisage, je suis en utilisant:
<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>
Des idées pourquoi la police peut être rendu comme des boîtes vides? Les réponses précédentes sur StackOverflow tout point à un mauvais chemins d'accès aux polices de caractères, ce qui n'est pas le cas ici, que les chemins d'accès sont corrects.
C'est évidemment un chemin d'accès incorrect, une ancienne version de bootstrap ou une version plus ancienne de glyphicon.
Je pense que ce lien vous aider : stackoverflow.com/questions/18222849/bootstrap-3-glyphicons-cdn
il ne peut pas être un chemin d'accès incorrect de problème, car le réseau de l'onglet outils de dev n'est pas afficher sur une page 404. Je suis en utilisant Bootstrap 3 avec les Glyphicons inclus dans que donc il n'y a pas de version problème.
Je vous encourage à télécharger la dernière version de bootstrap 3 ici: getbootstrap.com/customize. Il fonctionne très bien pour moi.
OriginalL'auteur John Dorean | 2013-09-07
Vous devez vous connecter pour publier un commentaire.
Pas vraiment une solution, mais j'ai fini par juste en utilisant le Bootstrap CA: http://www.bootstrapcdn.com/
OriginalL'auteur John Dorean
J'ai eu le même problème et j'ai été en mesure de le résoudre!
Dans IIS, j'ai défini les Types Mime pour woff et woff2 comme suit:
Dans le CSS de ma page, j'ai créé un chargé de la police de caractères à partir du bootstrap Glyphicon télécharger pour woff et woff2:
Dans le CSS, j'ai créé une classe pour les glyphicons et spécifié pour utiliser le haut de police que j'ai intitulé "Glyphes":
N'importe où je voulais afficher un glyphicon, j'ai spécifié par glyphicon classe alors le "bootstrap" glyphicon classe:
OriginalL'auteur Vlnflt
Place le dossier polices dans votre css répertoire
Il devrait aller comme
OriginalL'auteur Asghar Abbas
Selon les Glyphicons de l'équipe, c'est un bug dans WebKit:
WebKit CSS contenu Unicode bug?
Mais je n'ai pas undertend pourquoi une ancienne version de Chrome rendre cette. J'ai posté ici, les versions, mais un modérateur a supprimé ma réponse.
OriginalL'auteur Marcos Antonio Ferreira Doming
Cela peut aussi arriver si vous n'avez pas spécifié de deux classes (c'est à dire uniquement "glyphicon-star" au lieu de "glyphicon glyphicon-star")
Bon:
Mauvais
OriginalL'auteur Paul Schroeder
pour moi, c'est cette balise qui fonctionne ... juste l'icône définitions de classes différentes:
OriginalL'auteur stukennedy
Ci-dessous css strophe définit famille de polices pour les Glyphicons les Hobbits
//à l'intérieur de bootstrap.css
Si vous utilisez CA.. le nécessaire EOT ET de trame les fichiers sont disponibles en CAN URL relative du chemin..
j'.e,
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.eot
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff2
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.woff
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.ttf
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular
Donc, Si vous voulez utiliser les Glyphicons avec bootstrap.fichier css en local sur la machine..
télécharger tous ces fichiers à partir du lien ci-dessus et le mettre dans le même chemin d'accès relatif... j'.e ../fonts/
et essayez-le maintenant...
Note: je ne sais pas à propos de la gestion des licences pour que les fichiers (lu quelques docs pour une utilisation commerciale). peut-être il ya certains gratuit lien fourni par bootstrap pour télécharger ces fichiers...
OriginalL'auteur Karthikeyan
Pour moi, j'ai remarqué que dans la version sass, le
_glyphicons.scss
la section:devait être remplacé par la façon dont il l'habitude d'être:
OriginalL'auteur tic
pour ceux qui ont tout essayé avant et encore n'a pas fonctionné, j'ai changé
à
dans le bootstrap.fichier css
OriginalL'auteur Jakob Hartman
j'ai eu le même problème. Dans mon cas, c'était le type mime, mais ne le sait pas avant parce que mon iis n'a pas permettez-moi d'ajouter par ui comme je l'ai montrer:
Mon iis de l'interface utilisateur
Je ne pensais pas les types mime donc essayé d'autres solutions.
Des heures plus tard, de retour à regarder sur les types mime.
Utilisé beaucoup de solutions comme, edite mon web.config plus de 30 fois avec:
Code modifié, testé boudles, l'ajout de caractéristiques sur iis, a changé de chemin, après tout, les intentions dat merde carré toujours, rien n'travail.
Donc, dans un forum de lecture sur l'ajout de mimes types iis à l'aide de la console j'ai essayé d'ajouter comme ça qu'ils ont dit.
Ouvert un cmd en tant que admin et envoyé un texto :
Où:
"C:\Windows\System32\inetsrv"
c'est le dossier racine de l'iss.Et:
appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']"
C'est la ligne de commande pour la configuration de mime dans appcmd, comme vous le savez, iis.Résultat:
Et en et voilà ! que de travail.
J'espère que cela peut aider à quelqu'un. Pourrait être utile pour moi.
OriginalL'auteur Beli Mon
J'ai fait quelques comparaisons et il s'avère que le bootstrap.le fichier css, j'ai eu contenait ceci:
alors qu'il devrait lire:
Notez que j'ai ajouté un trait de soulignement qui correspond maintenant à l'id déclarée à l'intérieur d'
<font id="...">
dans le .fichier svg.doh... je parie que c'est Windows jouer de nouveau. J'ai souvent cut&coller et constate que j'ai encore l'ancien contenu dans le presse-papiers. J'ai commencé à appuyer sur Ctrl+C un couple ou plus avant de vous y fier. Bon spot Hugh!
Les deux chaînes sont identiques. J'ai même MD5 ed eux pour être sûr.
OriginalL'auteur Phil
Copier le dossier "polices" dans le paquet bootstrap sur votre serveur.
Et vous avez terminé.
OriginalL'auteur Klaas