Bootstrap Glyphicons not displaying in angular2

Question

I am trying to use bootstrap glyphicons in my angular2 app. I have installed bootstrap using the command npm install bootstrap --save My code snippet is

Answer 1

The advice with FontAwesome is correct but only partially. If you just follow the FontAwesome instructions you will fail in an Angular project.

Instead check the hint on this page:

Font Awesome now has an official Angular component that’s available for all who want to easily use our icons in projects. If you are using Angular, you need the angular-fontawesome package or Web Fonts with CSS.

Okay this means in an Angular project you need to use the following package: Angular FontAwesome

The best page that I have found for me as I am using NPM was this page.

So basically you need to:

1. Install FontAwesome in NPM
2. Import the module AngularFontAwesomeModule in your app.module.ts
3. Add the CSS in the angular-cli.json file

The details are all described in the link above.

4. To finally add an icon you can add a power-off icon in the app.component.html file:

Code:

5. AND you need to add the code in the related app.component.ts file:

Code:

    import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
    ...
    export class AppComponent implements OnInit {
      faPowerOff = faPowerOff;
    ...

ONE IMPORTANT NOTE!

Please realize you need to install the correct version of AngularFontawesome in NPM for your Angular version. Check this page for the compatibility table.

I used Angular 5 so I had to install it like this:

npm install @fortawesome/angular-fontawesome@0.1.1

The entry will then be added to your package.json file.