Webpack: not loading font-awesome fonts

[codeepic]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.2.5
node: 7.10.0
os: win32 x64

Related to #1463

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.

[Chelayos]

working for me, tried this today in one of our business apps. (@angular4.3.6)

in my case it loads the font stuff from the same folder i specified for font-awesome.min.css

angular-cli.json

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

[codeepic]

In my case all the fonts are loaded into dist folder, but the css points to the wrong directory.

So if you have a look in the above screenshot, on the left in the source for the application, the root folder location is '/assets/accounts/dist' but if you look at the 404 error messages on the right, the CSS tries to looks for the fonts in the wrong place - not in the '/assets/accounts/dist'.

[elvinmeza]

I was facing the same issue, turns out a slash was missing for the base-ref parameter, at its end. Fixed it running the build command like this: ng build --base-href /myapp/ --deploy-url /myapp/

[codeepic]

@elvinmeza - yes, that fixes my problem.
Big thanks to @filipesilva for pointing me in the right direction.

How we resolved the issue.

I have the Angular 2 app running with Scala Play framework.
Front-end of the Play app is held in 'accounts' folder.

Hence in my 'accounts.scala.html' I have <base href="/accounts" />

Play framework serves all the static assets from '/assets/accounts/dist/' folder.

When you run ng build the Angular-CLI will deploy all the files into 'dist' folder and the url paths in the css will also point to the dist folder - which is fine in most scenarios.

But when you open Play app in the browser, there is no directory like 'localhost/dist', so I was getting 404 for all fonts.

After I run ng build --deploy-url /assets/accounts/dist/
all the files including fonts are still output to the dist folder, but the --deploy-url flag changes the relative paths for all the assets that get referenced in css.
So now the url for the fonts in css stylesheet is: '/assets/accounts/dist/font-awesome.ttf';

[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.}