Self-Hosted FontAwesome Icons Not Rendering on OS X Sierra

Question

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?

Answer 1

I ended up using the CDN-based version of Font Awesome as self-hosting wasn't working in OS X or for Cordova builds of my app.