css - Bootstrap Glyphicons 未在 angular2 中显示

Question

我正在尝试在我的 angular2 应用程序中使用 Bootstrap 字形图标。我已经使用命令 npm install bootstrap --save 安装了 bootstrap 我的代码片段是

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

我在我的 styleUrls 中包含了 bootstrap- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

字形出现如图所示-

Answer 1

Boostrap 4 does not support Glyphicons 了，你可以使用 Font Awesome相反:

npm install --save fortawesome/fontawesome-free

并将 css 文件添加到您的 .angular-cli.json

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

],

用 Font Awesome 类替换 CSS 类:

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

重新编译应用:ng serve

更新: 由于 Font Font-Awesome 5 和 Angular 5 有一个官方的 angular-fontawesome 包可用:

https://github.com/FortAwesome/angular-fontawesome#installation