web-dev-qa-db-fra.com

Glyphicons rendus dans une boîte vide

J'utilise l'excellente bibliothèque d'amorçage Twitter avec Glyphicons, mais toutes les icônes sont rendues sous forme de carrés vides, comme ceci:

enter image description here

J'ai chargé les polices Glyphicons sur ma racine Web et modifié le fichier bootstrap.css pour qu'il pointe vers leur emplacement correct, ce que j'ai vérifié, car ils ont des requêtes 200 OK dans les outils de développement de Chrome:

enter image description here

C'est le balisage que j'utilise:

<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>

Des idées pour lesquelles la police peut être rendue sous forme de cases vides? Les réponses précédentes sur StackOverflow indiquent toutes des chemins incorrects pour les polices, ce qui n'est pas le cas ici car les chemins sont corrects.

csstwitter-bootstrapglyphicons
17
John Dorean

Ce n’est pas vraiment une solution, mais j’ai fini par utiliser le CDN Bootstrap: http://www.bootstrapcdn.com/

8
John Dorean

J'avais le même problème et j'ai pu le résoudre!

  • Dans IIS, j'ai défini les types Mime pour woff et woff2 comme suit:

    .woff application/x-font-woff
.woff2 application/font-woff2

  • Dans le CSS de ma page, j'ai créé la police chargée à partir du téléchargement du bootstrap Glyphicon pour woff et woff2:

    @font-face {
  font-family: 'Glyphs';
  src:  url('/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
        url('/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff');
}

  • Dans le CSS, j'ai créé une classe pour les glyphicons et spécifié d'utiliser la police ci-dessus que j'ai intitulée "Glyphes":

    .glyphicon {
    font-family: 'Glyphs', sans-serif;
}

  • Partout où je voulais afficher un glyphicon, j'ai spécifié par la classe glyphicon, puis la classe glyphicon typiquement bootstrap:

    <span class='glyphicon glyphicon-home'></span>
3
Vlnflt

Placez le dossier des polices dans votre répertoire css
Il devrait aller comme

css/fonts/**.svg
css/fonts/**.woff
3
Asghar Abbas

Cela peut aussi arriver si vous n'avez pas spécifié les deux classes (c'est-à-dire "glyphicon-star" au lieu de "glyphicon glyphicon-star")

Bien:

<i class="glyphicon glyphicon-star">

Mal

<i class="glyphicon">
2
Paul Schroeder

Selon l'équipe de Glyphicons, il s'agit d'un bogue dans WebKit:

Contenu CSS WebKit Bogue Unicode?

Mais je ne comprends pas pourquoi une ancienne version de Chrome rend cela. J'ai posté ici les versions, mais un modérateur a supprimé ma réponse.

1
Marcos Antonio Ferreira Doming

pour moi c'est ce balisage qui fonctionne ... juste les définitions de classe d'icônes qui sont différentes:

<a href="http://www.mysite.com/download" class="btn btn-primary">
    <span class="glyphicons star"></span> 
    Download to Computer
</a>
0
stukennedy

La strophe ci-dessous définit la famille de polices pour Glyphicons Halflings//inside bootstrap.css

@font-face {
    font-family: "Glyphicons Halflings";
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), 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");
}

Si vous utilisez CDN .., les fichiers EOT AND woof requis sont disponibles dans le chemin relatif de l'URL du CDN .. C'est-à-dire https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/ bootstrap.min.css /../../ fonts/glyphicons-halflings-regular.eothttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min. css /../../ fonts/glyphicons-halflings-regular.woff2https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/ .. /../fonts/glyphicons-halflings-regular.woffhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../ fonts/glyphicons-halflings-regular.ttfhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/../../fonts/glyphicons- halflings-regular.svg # glyphicons_halflingsregular

Donc, si vous voulez utiliser Glyphicons avec le fichier bootstrap.css sur votre machine locale ...__, téléchargez tous ces fichiers à partir du lien ci-dessus et mettez-les dans le même chemin relatif ... i.e ../fonts/

et essayez maintenant ...

Remarque: je ne connais pas la licence de ces fichiers (lisez des documents à usage professionnel). peut-être y at-il un lien gratuit fourni par bootstrap pour télécharger ces fichiers ...

0
Karthikeyan

pour ceux qui ont tout essayé avant et qui n'ont toujours pas fonctionné, j'ai changé 

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

à

.glyphicon:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

dans le fichier bootstrap.css

0
Jakob Hartman

j'ai eu le même problème. Dans mon cas, c'était du type mime, mais je ne le savais pas avant car mon iis ne m'a pas laissé ajouter par ui comme je le montre:

Mon iis ui

Je ne pensais pas que c’était des types de mime alors j’ai essayé d’autres solutions . Quelques heures plus tard, nous nous sommes penchés sur les types de mime.

Utilisé beaucoup de solutions comme, éditez mon web.config plus de 30 fois avec:

<configuration>
<system.webServer>
    <staticContent>
        <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
        <mimeMap fileExtension="svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>

Code modifié, boudles testés, ajout de caractéristiques sur IIS, chemin modifié, après tout, le but est toujours, rien ne fonctionne.

Donc, dans un forum qui lit à propos de l’ajout de types de mimes à iis avec console, j’ai essayé d’ajouter de la sorte, ont-ils dit.

Ouvert un cmd en tant que admin et texté:

C:\Windows\System32\inetsrv>appcmd.exe set config /section:staticContent
/+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']"

Où:

"C:\Windows\System32\inetsrv" c'est le dossier racine de iss.

Et:

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']" C'est la ligne de commande pour configurer ce mime dans appcmd, comme vous le savez, iis.

Résultat:

Et et voilà! ce travail.

J'espère que cela peut aider quelqu'un. Pourrait être utile pour moi. 

0
Beli Mon

Pour moi, j'ai remarqué que dans la version sass, le _glyphicons.scss la section:

@at-root {
  // Import the fonts
  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
    src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot #iefix')) format('embedded-opentype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
         url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
  }
}

a dû être remplacé par la façon dont il était:

// Import the fonts
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
  src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
       url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
}
0
tic