After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don’t need any vendor files, no system.js — only webpack. So you do:
-
npm install font-awesome --save
-
In the
angular-cli.json
file locate thestyles[]
array and add font-awesome references directory here, like below:"apps": [ { "root": "src", "outDir": "dist", .... "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!? ], ... } ] ],
In more recent versions of Angular, use the
angular.json
file instead, without the../
. For example, use"node_modules/font-awesome/css/font-awesome.css"
. -
Place some font-awesome icons in any html file you want:
<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
-
Stop the application Ctrl + c then re-run the app using
ng serve
because the watchers are only for the src folder and angular-cli.json is not observed for changes. - Enjoy your awesome icons!