自己ホストされたフォントOS Xでレンダリングされていない素晴らしいアイコンSierra

Question

私の人生にとって、私は自分のホストしているFontAwesomeアイコンを私のAngular 2アプリケーションでレンダリングすることはできません。これらのフォントのための

私のディレクトリ構造は次のとおりです。ローカルサイトにサービスを提供する際に

/src/assets/app/fonts/font-awesome/4.7.0/

WebPACKのは、rootとして/src/を使用しています。

私のアプリでHTTPリクエストを減らすために、私は私のindex.htmlファイルに縮小さFontAwesome CSSをインライン化し、index.htmlの中のような@font-faceを指定している：

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

あなたが見ることができるように、フォントファイルへのパスはルートからの相対パスであり、これらのURLを介して個々のフォントファイルを直接ダウンロードすることができるので、これはパスの問題ではないと確信しています。

OS XのChromeでは、四角形が表示されます。 Safariでは、私は全くアイコンを取得しません。私は、私のようなさまざまな問題を経験している多くの人々と多くの記事をコーディネートしてきましたが、これまで何も助けてくれませんでした。それはまだ動作しません

{ 
    test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/, 
    use: ['url'] 
} 

：私はフォントのための特定のローダーを供給する場合であっても

。 Windows 8.1/10およびLinux（Ubuntu/Mint）では、すべて正常に動作します。私は間違って何をしていますか？

Answer 1

OS Xや自分のアプリケーションのCordovaビルドで自己ホスティングが機能しないため、CDNベースのバージョンのFont Awesomeを使用してしまいました。