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

 <button *ngIf="pos.name == uname" type="button" class="btn btn-default       btn-sm delete" (click)="DeleteBulletin();">    <span class="glyphicon glyphicon-trash glyph"></span>  Delete  </button> 

I have included bootstrap in my styleUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

The glyphicon appears as shown-

Answer 1

Boostrap 4 does not support Glyphicons anymore, you can use Font Awesome instead:

npm install --save fortawesome/fontawesome-free 

OR install the official Angular Fontawesome Package: https://github.com/FortAwesome/angular-fontawesome

and add the css File to your .angular-cli.json

"apps": [           {              ....              "styles": [                 "styles.css",                 "../node_modules/bootstrap/dist/css/bootstrap.css",                 "../node_modules/font-awesome/css/font-awesome.css"              ],              ...          }        ]  ], 

Replace CSS class with the Font Awesome classes:

<i class="navbar-toggler-icon fa fa-bars"> </i> 

recompile app: ng serve

Answer 2

You have to import

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

to your index.html