error in the web console - icons are display correctly

[mic0331]

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

[travelist]

@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.

[mvnce]

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; }

[sekar-fa]

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", //... ],

[michaeldevenney]

This happens on an ASP.NET site as well.