Fontawesome funktioniert nicht, wenn es von IIS bereitgestellt wird

StackOverflow https://stackoverflow.com//questions/23007250

Frage

FontAwesome funktioniert bei mir nicht, wenn ich meine App auf den IIS7-Server stelle.

In Firefox ist die angeforderte URL codiert in http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3 und ich bekomme 404.Wenn ich mich ändere %3F zu ? alles funktioniert gut.

Das Gleiche passiert im IE, aber die Anfrage geht an eot font.

Dies ist, was ich in CSS habe (wie auf der FontAwesome-Seite):

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Ich denke, das Problem ist, dass IIS die URLs codiert und anstatt anzufordern ../fonts/fontawesome-webfont.eot? die Anfrage geht an ../fonts/fontawesome-webfont.eot%3F.

Bitte schlagen Sie nicht vor, 'zu entfernen '?' oder '#' aus den URLs.Sie sind absichtlich da und unerlässlich.Die Frage ist, wie man IIS dazu bringt, die URLs nicht auf diese Weise zu codieren.Alle Hinweise werden geschätzt.

Bearbeiten:Übrigens.die obige Situation findet im Web statt.konfiguration Ich setze die Zeichen requestValidationMode und requestpathinvalid:

<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />

Ohne es bekomme ich 400 (schlechte Anfrage):Eine potenziell gefährliche Anfrage.Pfadwert wurde vom Client erkannt (?)

Wie kann ich IIS reparieren, um die Schriftart ordnungsgemäß bereitzustellen?

Bearbeitung2: OK, ich habe die Ursache des Problems gefunden.Das SquishIt-Bündelungstool für MVC3 änderte diese Zeichen.Wenn ich Schrift ausschließe - großartig.css aus dem Bundle funktioniert alles einwandfrei.

War es hilfreich?

Lösung 4

Das SquishIt-Bündelungstool für MVC3 kodierte die Schriftpfade URL-kodiert, also ../fonts/fontawesome-webfont.eot? in der CSS-Datei wurde geändert in ../fonts/fontawesome-webfont.eot%3F.Dies gibt normalerweise 400 zurück, da % 3F als unsicher gilt.Wenn Sie einstellen requestPathInvalidCharacters="" dann gilt% 3F als sicher, aber es gibt offensichtlich keine Datei `../ schriftarten / fontawesome-webfont.eot%3F`, also 404.

Ich habe fontawesome entfernt.css aus dem Bundle und alles funktioniert gut.

Andere Tipps

Warum wirft @font-face einen 404-Fehler auf woff-Dateien?

Fügen Sie die MIME-Typen im Feld hinzu webkonfiguration:

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>    
  </system.webServer>

Sie können IIS öffnen, auf Ihre Website zeigen, In IIS-Sitzung, wählen MIME-Typen.Nachdem die Ansicht Mime-Typen angezeigt wurde, klicken Sie auf Hinzufügen -> Im Dialog:

  • Dateinamenerweiterung: .woff
  • MiME-Typen: anwendung / x-font-woff

OK.

Erfolgen.

Diese Antwort gilt nicht für das obige Problem Aber für diejenigen, die auf ähnliche Fehler stoßen, aber aus anderen Gründen und in diesem Thread landen.

Ich hatte ein ähnliches Problem, stellte aber später fest, dass IIS versuchte, nach font-awesome woff, eot-Dateien im Ordner zu suchen MyIpAddress/fonts/fontawesome-webfont.woof aber ich hatte die Dateien in einem anderen Ordner.Verschieben der fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff in meinen Schriftartenordner habe ich mein Problem gelöst

für mich hat nur das Hinzufügen des Bootstrap-CDN-Links das Problem gelöst

für Ihre Seite:

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>

Das Spielen mit dem IIS-Server ist riskant, stattdessen habe ich einen anderen Trick ausprobiert, der zu 100% erfolgreich war.

Schritt 1

Benennen Sie die Namen der Schriftdateien um, indem Sie hinzufügen.jpg am Ende der Dateien.

fontawesome-Webschrift.EOT.jpg (ebenfalls)

Ändern Sie dann die Dateitypen in fontawesome.css-Schrift-Rendering-Linien

 */@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg');

Wenn Sie CodeIgniter unter IIS7 verwenden :

In Ihrem Web.konfigurationsdatei, hinzufügen woff zu den Muster

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

Hoffe es hilft!

Ich wechselte von woff2 zu woff und es lief gut.

Wenn Sie FontAwesome über die Bündelung hinzufügen, kann die woff2-URL verworfen werden.Siehe die folgende Lösung in einem ähnlichen Thread, in dem CssRewriteUrlTransform wird verwendet, um die URL zu überarbeiten:https://stackoverflow.com/a/22700610/746984

Verwenden Sie dieses CDN in Ihrem Index.html-Seite...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top