For the life of me, I can't get self-hosted FontAwesome icons to render in my Angular 2 application.
My Directory structure for these fonts is:
/src/assets/app/fonts/font-awesome/4.7.0/
WebPack is using /src/ as the root when serving the site locally.
To reduce http requests in my app, I have inlined the minified FontAwesome css in my index.html file, and specified the @font-face as such in index.html:
@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;
}
As you can see, the paths to the font files are root relative, and I am able to download the individual font files via those URLs directly, so I'm pretty sure this isn't a path issue.
In Chrome on OS X, I get squares. In Safari, I don't get any icons at all. I have combed through lots of articles with lots of people experiencing various issues similar to mine, but nothing has helped so far.
Even if I supply a specific loader for fonts:
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
use: ['url']
}
it still doesn't work. On Windows 8.1/10 and Linux (Ubuntu / Mint), everything works as expected. What am I doing wrong?
