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?

[xmlking]

setting font-awesome.css in angular-cli.json is not impressive solution. Would like to see native SCSS style solution. i.e., $fa-font-path: "/node_modules/font-awesome/fonts" !default;

      "styles": [
        "styles.scss",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

[jeff-jacobs]

I second something like this. Angular-CLI should really be able to pull files from node_modules directories. Honestly, what might be helpful is 'mapping' the assets files...like, specifying a source path.

Right now it assumes the path based on the app source files.

"assets": [ "assets", "favicon.ico" ]

And it knows to look at /project/src for /assets and favicon.ico and places them in a comparable location in the dist output. This works well for items that are in the /src directory.

What might be better is being able to specify where the file is in your project and where it should go? /src could still be the starting place. For example (with the addition of font awesome to illustrate):

"assets": [ { source: "assets", output: "assets" }, { source: "favicon.ico", output: "favicon.ico" }, { source: "../node_modules/font-awesome/fonts", output: "fonts" } ]

So, you would end up with both assets and a fonts folder in your /dist, and then you could just point your css file accordingly. Something like that at least.

[mikhailmelnik]

With #1633 I'm able to just reference bootstrap and font awesome in my styles.less but I'm not satisfied with location and naming. All fonts are placed to the root and both font and style names are mangled so with every build clients should download them again and again.

I can't use CDN by couple of reasons and don't want to copy files from /node_modules to /assets myself. I would prefer to state it once in configuration and let angular-cli copy it to the specified place without touching these 3rd party libraries at all or let me specify if I need pre-processing and/or mangling options.

[filipesilva]

@jeffaxial @mikhailmelnik I added something similar when I closed #3401.

#3500 is tracking it also.

[mkyt]

#3401 enabled remapping names for css/js but not for assets (static files).
It would be great if similar remapping works also for assets.

[omobono]

Same issue here - workaround we found for angular-cli is to change font-path sass variable in our styles.scss imports:

$fa-font-path: "../node_modules/font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

[shri3k]

I think this is well-documented in sass-loader. Since, font-awesome uses relative path for fonts, webpack would have hard time resolving to the path generated from sass-loader so to solve that problem, as stated in the sass-loader readme - install resolve-url-loader and just place it just before sass-loader and css-loader
e.g.

// for webpack v1.x
{ 
  test: /\.scss$/,
  loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
}

or

// for webpack >2.x
{ 
  test: /\.scss$/,
  use: "style-loader!css-loader!resolve-url-loader!sass-loader"
}

Alternative solution, also as stated in the sass-loader readme is to overwrite the $fa-font-path variable of font-awesome if for some reason you're not able to use resolve-url-loader.

e.g.

$fa-font-path: "~font-awesome/font";
@import "~font-awesome/scss/font-awesome";

[codeepic]

I tried method mentioned by @omobono and @shri3k:

$fa-font-path: "~font-awesome/font";
@import "~font-awesome/scss/font-awesome";

and variations of it but it still doesn't work. After I build the project, I get 404 for the fonts. No matter what I put as $fa-font-path, they are being served from the root of the project.

I am on angular-cli 1.2.5

[nothingvacom]

edit web.config to add
<staticContent> <mimeMap fileExtension=".woff2" mimeType="font/woff2" /> </staticContent>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}