webpack: loading fonts (specifically font-awesome)

[intellix]

Using the webpack branch and am attempting to load in font-awesome. Loading other 3rd party libs so far has been amazing in comparison to how it was before.
I'm having an issue with getting webpack to pickup the font-awesome files. Getting 404 errors in console:

http://localhost:4200/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 
http://localhost:4200/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 
http://localhost:4200/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3 404 (Not Found)

I'm using node-sass, and I've tried a large combination of things:

$fa-font-path: 'node_modules/font-awesome/fonts';
$fa-font-path: 'font-awesome/fonts';
$fa-font-path: '~/font-awesome/fonts';

I've tried font-awesome-loader and including that via JS. Other people recommend having a webpack-config.js, which doesn't seem to do anything either as I'm guessing angular-cli goes around that?

[TheLarkInn]

Also related to #1465
Solving this should also be able to help address this issue.

[itsavinash]

I am facing the same issue

[moloch--]

Is there any workaround for this? I can't get webpack to include font-awesome or bootstrap CSS; most of the documentation says to add settings to your webpack.config.js but this doesn't seem to exist in the angular-cli setup? It would be nice to have some sort of explanation as to how angular-cli handles the webpack.config.js file/settings/etc.

[TheLarkInn]

So we are using the Node API for webpack instead of the config. So what I recommend if you want to work around it would be to look at webpack-config.ts inside of 'models' folder. We want to be able to tackle this is an agnostic approach thus the wait on implementing.

[zakdances]

Not a great solution, but I'm just copying my font-awesome fonts dir to my public dir, then:

@fa-font-path: 'public/fonts';

[intellix]

for the above to work, I had to copy into public dir and the path was: @fa-font-path: 'fonts'

[filipesilva]

#1633 seems to fix this. I got it to work with CSS imports via @import '../node_modules/font-awesome/css/font-awesome.css';

Saw that fonts were found and bundled.

[jeff-jacobs]

@filipesilva I'm running into this same issue where I have a pack of icon font files. I am trying to get them from node_modules into my app.

So, you're saying you were able to import a css file, webpack read the file, recognized there were related font files and then included them in your build?

[daBishMan]

which version of the cli was this fixed in, I am still getting this locally.

[mb2140]

I'm also having trouble getting this to work. Anyone have a work example?

[mallim]

@mb2140 have you try @filipesilva 's method?