Für das Leben von mir, kann ich nicht selbst gehostet FontAwesome Symbole in meiner Angular 2-Anwendung zu rendern.Self-Hosted FontSuper Icons nicht auf OS X Sierra
Meine Verzeichnisstruktur für diese Schriftarten ist:
/src/assets/app/fonts/font-awesome/4.7.0/
WebPack /src/ als Wurzel verwendet, wenn sie lokal die Website dient.
@font-face{
font-family: 'FontAwesome';
src: local('FontAwesome'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?v=4.7.0') format('embedded-opentype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.svg?v=4.7.0#FontAwesome') format('svg');
font-style: normal;
font-weight: normal;
}
Wie Sie das sehen,:
auf HTTP-Anfragen in meiner app zu reduzieren, ich habe die minimierte FontAwesome CSS in meiner Datei index.html, und spezifiziert die @font-face als solche in index.html inlined Die Pfade zu den Font-Dateien sind root-relativ, und ich kann die einzelnen Font-Dateien direkt über diese URLs herunterladen, also bin ich mir ziemlich sicher, dass dies kein Pfadproblem ist.
In Chrome auf OS X, bekomme ich Quadrate. In Safari bekomme ich überhaupt keine Icons. Ich habe viele Artikel durchsucht, in denen viele Leute ähnliche Probleme hatten wie ich, aber nichts hat bisher geholfen.
Auch wenn ich einen bestimmten Lader für Schriften liefern:
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
use: ['url']
}
es immer noch nicht funktioniert. Unter Windows 8.1/10 und Linux (Ubuntu/Mint) funktioniert alles wie erwartet. Was mache ich falsch?