Ich weiß nicht, was los ist, aber in der Browserkonsole sehe ich 3 Fehler im Zusammenhang mit font-awesome
GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0
GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0
Ich weiß, dass es lächerlich ist, ich kann das nicht selbst herausfinden, aber alles scheint in Ordnung zu sein, in meiner index.html habe ich so etwas
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
und das ist alles, was ich mit der Schriftart-großartigen Sache zu tun habe. Ich überprüfe bereits den Pfad und bin damit nicht falsch.
Passiert das mit einem von euch?
AKTUALISIEREN
Dies ist der NGINX-Teil, in den ich einige Inhalte in die Header lade
add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";
css
fonts
font-awesome
Nicht
quelle
quelle
Antworten:
Fügen Sie die .woff-Datei zu Ihrem Anwendungsserver-MIME-Typ (z. B. iis-> MIME-Typ) als application / font-woff hinzu
quelle
Besser noch, fügen Sie diesen Abschnitt zu Ihrer web.config hinzu, und diese MIME-Typen werden dann automatisch zu IIS auf jedem Server hinzugefügt, auf dem Sie bereitstellen. (Das Entfernen dient dazu, einen doppelten MIME-Typfehler zu vermeiden, falls diese bereits vorhanden sind.)
<system.webServer> <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="font/x-woff" /> </staticContent> </system.webServer>
quelle
web.config
Datei Angular im Ordner / src ablegen möchten, passen Sie angular.json / angle-cli.json an, um sie"src/web.config"
in ein Array von Assets einzufügen . Stellen Sie danach einfach alles wie gewohnt in Azure bereit. Solche .woff / woff2-Fehler sind verschwunden.Ich hatte das gleiche Problem mit iis. Ich habe einen neuen MIME-Typ mit ".woff2" als Dateierweiterung und "font / x-woff" als MIME-Typ hinzugefügt und das Problem gelöst.
quelle
1. Gehen Sie zu IIS, suchen Sie Ihre Website, suchen Sie den MIME-Typ, klicken Sie dann auf Hinzufügen
2. Setzen Sie "woff2" auf den angehängten Dateinamen. Setzen Sie "application / font-woff" auf den Mime-Typ
3. Starten Sie Ihre Website in IIS neu
quelle
Die von Ihnen angegebenen URLs sind alle ungültig und verweisen nicht auf eine Ressource. Soweit einer von uns anhand Ihres Beitrags erkennen kann, existieren sie einfach nicht.
Haben Sie Ihre Dateien korrekt für die beabsichtigte Ordnerstruktur hochgeladen?
quelle
Content-Security-Policy
, siehe mein UPDATE zu der Frage bitte. Und über welche Links sprichst du?//www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0
natürlich funktionieren, ist dieswww.desktop.just4bettors.mobi
die Seite, auf der ich gerade arbeite, nein, aber ich bekomme diese Links nicht für den font-fantastischen Teil.Ich hatte genau das gleiche Problem auf einem "cPanel Shared Host Server", der nur Apache2-Webserver zulässt. Da Platzhalter (*) mit dem Wert 'Access-Control-Allow-Origin' in den Sicherheitseinstellungen des gemeinsam genutzten Hosts nicht zulässig sind (weil: Bandbreiten- und Ressourcendiebe), musste ich einen anderen Weg finden, damit dies funktioniert.
Diese vom OP gestellte Frage schließt auf Nginx, aber die akzeptierten und am besten bewerteten Antworten scheinen für IIS zu sein. Es könnte Leute (wie mich) geben, die auf diese Frage stoßen und nach Apache2-Lösungen suchen, die sich auf CORS- "Berechtigungen" in Apache beziehen. Hier war also das Wundermittel für mich, um dieses Problem zu lösen. Ich habe oben in meinem Stammverzeichnis einer WP-Site in der .htaccess-Datei Folgendes hinzugefügt:
<IfModule mod_headers.c> <IfModule mod_rewrite.c> SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0 Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS Header merge Vary "Origin" </IfModule> </IfModule>
Ich wünschte, ich könnte diesen fantastischen Teil der RegEX-Magie würdigen, aber ich erkläre, wie ich diese Lösung in diesem Beitragskommentar zu einer ähnlichen Frage hier abgeleitet habe: Platzhalter-Subdomains, -Ports und -Protokolle für Zugriffskontrolle-Zulassen-Ursprung
quelle
Keine der oben genannten Lösungen hat bei mir funktioniert, außer der folgenden. Bitte fügen Sie diese Zeile nach allen 'bundles.Add'-Befehlen in Ihrer BundleConfig.cs-Datei hinzu:
BundleTable.EnableOptimizations = false;
quelle
Gehe zu: http://fortawesome.github.io/Font-Awesome/get-started/
... verwenden Sie Bootstrap CDN, um Font Awesome mit einer einzigen Codezeile zu Ihrer Website hinzuzufügen. Sie müssen nicht einmal etwas herunterladen oder installieren! "
quelle
Ich hatte genau das gleiche Problem und die gleichen Fehler. Das Löschen meiner Font-Awesome-Bibliothek und das Installieren der aktuellsten Version haben das Problem behoben.
quelle
Fügen Sie die .woff2 zu Ihrem Anwendungsserver-MIME-Typ (z. B. iis-> MIME-Typ) als application / font-woff hinzu
Es hat gut funktioniert für mich.
Genießen !!!
:) :)
quelle