Font Super-Icons funktionieren nicht, wenn sie vom Dateisystem oder IIS bedient werden - CSS, IIS, Fonts, Font-awesome

So habe ich Font Awesome in meinem Projekt arbeiten.Derzeit wird das von Grunt in der Entwicklung bedient. Das Problem ist, dass wenn ich versuche, die Site vom Dateisystem oder von IIS aus zu starten, die Icons nicht funktionieren. Sie sind nicht wiederzuerkennende Symbole. Grunt und IIS bedienen beide aus demselben Ordner, also sollten die Dinge identisch sein.

Dies geschieht in Chrome und IE. Ich habe überprüft, dass es keine 404 gibt (ich bekomme Kästchen, wenn die Dateien nicht gefunden werden).

Ich benutze Font Awesome 4.3.0.

Hier von Grunt serviert:

Font Awesome Icons arbeiten, wenn von Grunt serviert

Hier ist wie aus dem Dateisystem und IIS serviert:

Schriftart Super-Symbole funktionieren nicht, wenn sie vom Dateisystem oder IIS aus bedient werden

So sieht der HTML-Code aus:

<li>
<a href="#">
<i class="fa fa-clock-o"></i>Operations
<span class="fa arrow"></span>
</a>
</li>

Antworten:

1 für die Antwort № 1

Endlich!

Ich benutze die SASS-Bibliothek für Font Awesome. Nun, in meiner SASS-Hauptdatei hatte ich:

@import "variables";
@import "../../vendor/font-awesome/scss/font-awesome";
@import "bootstrap";
@import "layout";

Was ich tun musste, war Bootstrap vor Font Awesome zu stellen. So sieht es jetzt aus:

@import "variables";
@import "bootstrap";
@import "../../vendor/font-awesome/scss/font-awesome";
@import "layout";

Anscheinend störten Bootstraps Stilemit den Schriftarten "Awesome". Ich kann immer noch nicht herausfinden, warum es funktionierte, wenn es von Grunt und nicht von IIS / File System bedient wurde. Aber beachten Sie, dass Font Awesome enthalten sein sollte, nachdem jede Bibliothek eine eigene Implementierung von Font Awesome hat.


0 für die Antwort № 2

Die vorherige SASS-Importbestellung hat also mein Problem nicht behoben.

Ich bin im SASS-Repo endlich auf dieses Thema gestoßen: https://github.com/sass/sass/issues/1395.

Wenn ich die Problemkommentare lese, scheint es soWenn SASS die Komprimierung vornimmt, ändert es die Font-Awesome-Zeichen von einer ASCII-Folge mit Escape-Zeichen in Unicode. Daher müssen wir explizit sein, damit der Browser weiß, wie er interpretiert wird.

Was am Ende für mich (hoffentlich sicher diesmal) behoben wurde, war hinzuzufügen

<meta charset="utf-8" />

zu meinem head.

Daumen drücken, dass dies endlich behoben ist.


Speisekarte