引导字形不显示在angular2中 [英] Bootstrap Glyphicons not displaying in angular2

问题描述

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

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>

我在我的styleUrls中包含了引导程序- 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

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