web-dev-qa-db-ger.com

Glyphicons als leere Box

Ich verwende die ausgezeichnete Twitter-Bootstrap-Bibliothek mit Glyphicons, jedoch werden alle Symbole als leere Quadrate gerendert.

enter image description here

Ich habe die Glyphicons-Schriftarten in mein Webstammverzeichnis hochgeladen und die bootstrap.css-Datei so geändert, dass sie auf ihre korrekten Speicherorte verweist. Dies wurde überprüft, da sie 200 OK-Anforderungen in den Chrome-Entwicklertools haben:

enter image description here

Dies ist das Markup, das ich verwende:

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

Irgendwelche Ideen, warum die Schrift als leere Boxen dargestellt wird? Alle vorherigen Antworten in StackOverflow deuten auf falsche Pfade zu den Schriftarten hin, was hier nicht der Fall ist, da die Pfade korrekt sind.

17
John Dorean

Nicht wirklich eine Lösung, aber am Ende habe ich nur das Bootstrap-CDN verwendet: http://www.bootstrapcdn.com/

8
John Dorean

Ich hatte das gleiche Problem und konnte es lösen!

  • In IIS habe ich die Mime-Typen für woff und woff2 wie folgt festgelegt:

    .woff application/x-font-woff
    .woff2 application/font-woff2
    
  • In der CSS für meine Seite erstellte ich eine geladene Schriftart aus dem Bootstrap-Download Glyphicon für woff und 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');
    }
    
  • In der CSS habe ich eine Klasse für Glyphicons erstellt und die Verwendung der obigen Schriftart "Glyphs" festgelegt:

    .glyphicon {
        font-family: 'Glyphs', sans-serif;
    }
    
  • Überall, wo ich ein Glyphicon anzeigen wollte, habe ich die Glyphicon-Klasse angegeben, dann die normalerweise Bootstrap-Glyphicon-Klasse:

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

Legen Sie den Schriftartenordner in Ihrem CSS-Verzeichnis ab
Es sollte so gehen

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

Dies kann auch passieren, wenn Sie nicht beide Klassen angegeben haben (d. H. Nur "Glyphicon-Star" anstelle von "Glyphicon Glyphicon-Star").

Gut:

<i class="glyphicon glyphicon-star">

Schlecht

<i class="glyphicon">
2
Paul Schroeder

Laut Glyphicons-Team ist dies ein Fehler in WebKit:

WebKit CSS-Inhalt Unicode-Fehler?

Ich verstehe jedoch nicht, warum eine ältere Chrome-Version dies rendert. Ich habe hier die Versionen gepostet, aber ein Moderator hat meine Antwort gelöscht.

für mich ist es dieses Markup, das funktioniert. Nur die Definitionen der Symbolklassen unterscheiden sich:

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

Unter css stanza wird die Schriftfamilie für Glyphicons Halflings//inside bootstrap.css definiert

@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");
}

Wenn Sie CDN verwenden, sind die erforderlichen EOT-UND-Woof-Dateien im relativen Pfad der CDN-URL verfügbar ..., dh 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

Wenn Sie also Glyphicons mit der Datei bootstrap.css auf Ihrem lokalen Computer verwenden möchten, laden Sie alle diese Dateien von dem obigen Link herunter und legen Sie sie in denselben relativen Pfad ... d.

und jetzt probieren ...

Hinweis: Die Lizenzierung dieser Dateien ist mir nicht bekannt (einige Dokumente für den geschäftlichen Gebrauch lesen). Möglicherweise gibt es einen kostenlosen Link, der von bootstrap bereitgestellt wird, um diese Datei herunterzuladen ...

0
Karthikeyan

für diejenigen, die alles schon einmal ausprobiert haben und trotzdem nicht funktionieren, habe ich mich verändert 

.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;
}

zu

.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
}

in der Datei bootstrap.css

0
Jakob Hartman

ich hatte das gleiche Problem. In meinem Fall war es der Mime-Typ, aber ich weiß es vorher nicht, weil mein iis mich nicht durch UI hinzufügen ließ, wie ich zeige:

Mein iis ui

Ich dachte nicht, dass Mime-Typen so andere Lösungen ausprobierten ... Stunden später, um sich nach Mime-Typen umzusehen.

Viele Lösungen, wie zum Beispiel, meine web.config mehr als 30 Mal verwendet mit:

<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>

Geänderter Code, getestete Boudles, Hinzufügen von Charakteristiken auf iis, geänderter Pfad, schließlich ist alles verdammt quadratisch, nichts funktioniert.

Also, in einem Forum, in dem ich über das Hinzufügen von Mimes-Typen zu iis mit Console las, habe ich versucht, so hinzuzufügen, wie sie sagten.

Öffnet ein cmd als admin und schreibt:

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

Woher:

"C:\Windows\System32\inetsrv" ist der Stammordner von iss.

Und:

appcmd.exe set config /section:staticContent /+"[fileExtension=' .ttf ',mimeType=' application/x-font-truetype ']" Es ist die Befehlszeile, um diesen Mime in appcmd einzurichten, wie Sie wissen.

Ergebnis:

Und et voilà! diese Arbeit.

Ich hoffe, das kann jemandem helfen. Könnte für mich nützlich sein. 

0
Beli Mon

Für mich ist mir aufgefallen, dass in der sass-Version der _glyphicons.scss der Abschnitt:

@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');
  }
}

musste ersetzt werden durch wie es war:

// 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