Bootstrap Glyphicons 不显示在 angular2 中

问题描述

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

I am trying to use bootstrap glyphicons in my angular2 app. I have installed bootstrap using the command npm install bootstrap --saveMy 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>

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

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

字形如图所示-

推荐答案

Boostrap 4 不再支持 Glyphicons，您可以使用Font Awesome 代替:

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

npm install --save fortawesome/fontawesome-free

或安装官方 Angular Fontawesome 包:https://github.com/FortAwesome/angular-fontawesome

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

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

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

],

用 Font Awesome 类替换 CSS 类:

Replace CSS class with the Font Awesome classes:

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

重新编译应用程序:ng serve

这篇关于Bootstrap Glyphicons 不显示在 angular2 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！