error in the web console - icons are display correctly

[Michaël]

Hi,

Using this plugin with the angular2-quickstart template I'm getting errors in my web console however they are displayed properly on the page.

GET http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.6.3
:3000/fonts/fontawesome-webfont.woff?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.6.3
:3000/fonts/fontawesome-webfont.ttf?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.6.3
:3000/fonts/fontawesome-webfont.woff2?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.6.3
:3000/fonts/fontawesome-webfont.woff?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.6.3
:3000/fonts/fontawesome-webfont.ttf?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.6.3

Any idea ?
I follow your doc and included the two references in systemjs.config.js

[K]

@mic0331 Thank you for the comment, Actually i'm not sure the reason eather.. I gonna just quick try to investigate the reason and will update later.

[Siyan Ma]

Did you use any CSS pre-processor? I got the same problem with LESS (icons are displayed correctly). When I change to CSS files, there is no error.

[scopolamin]

Angular 2

"font-awesome": "^4.7.0",
"angular2-fontawesome": "~0.7.0"

Wrong path:

GET http://localhost:53917/fonts/fontawesome-webfont.woff2?v=4.7.0
fonts/fontawesome-webfont.woff?v=4.7.0:1
GET http://localhost:53917/fonts/fontawesome-webfont.woff?v=4.7.0 404 (Not Found)
fonts/fontawesome-webfont.ttf?v=4.7.0:1
GET http://localhost:53917/fonts/fontawesome-webfont.ttf?v=4.7.0
fonts/fontawesome-webfont.woff2?v=4.7.0:1
GET http://localhost:53917/fonts/fontawesome-webfont.woff2?v=4.7.0
fonts/fontawesome-webfont.woff?v=4.7.0:1
GET http://localhost:53917/fonts/fontawesome-webfont.woff?v=4.7.0
fonts/fontawesome-webfont.ttf?v=4.7.0:1
GET http://localhost:53917/fonts/fontawesome-webfont.ttf?v=4.7.0

Should be:

GET http://localhost:53917/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
fonts/fontawesome-webfont.woff?v=4.7.0:1
GET http://localhost:53917/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 404 (Not Found)
fonts/fontawesome-webfont.ttf?v=4.7.0:1
GET http://localhost:53917/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
fonts/fontawesome-webfont.woff2?v=4.7.0:1
GET http://localhost:53917/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
fonts/fontawesome-webfont.woff?v=4.7.0:1
GET http://localhost:53917/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
fonts/fontawesome-webfont.ttf?v=4.7.0:1
GET http://localhost:53917/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0

[scopolamin]

Seems to be a src-url mistake in node_modules/font-awesome/css/font-awesome.css

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

[Chandrasekar Shanmugam]

Try adding as below so that it becomes a global style,
https://github.com/angular/angular-cli/wiki/stories-global-styles

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

[Mike Devenney]

This happens on an ASP.NET site as well.