Bootstrap Glyphicons没有以angular2显示

Question

我想在我的angular2应用程序中使用bootstrap glyphicons.我已经使用命令npm install bootstrap安装了bootstrap --save我的代码片段是

 <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中包含了bootstrap:['node_modules/bootstrap/dist/css/bootstrap.min.css','app/home.component.css']

glyphicon如图所示 -

Answer 1

Boostrap 4 不再支持 Glyphicons,您可以使用Font Awesome:

npm install --save font-awesome

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

Answer 2

你必须导入

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

到你的index.html

Answer 3

我将bootstrap3安装为npm install bootstrap @ 3，它开始工作

只需要添加angular-cli.json：-

   "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
     ],

Answer 4

如果您的应用程序已由angular-cli搭建脚手架（使用“ng init”或“ng new”），则项目根目录中有angular-cli-build.js文件。

angular-cli-build.js指示项目的构建（使用“ngserve”或“ng build”）将第 3 方库放入供应商文件夹中。

Bootstrap 分发文件夹中有一个fonts文件夹，其中包含字形文件。这些引导文件也需要放入供应商文件夹中。

角度-cli-build.js：

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'bootstrap/dist/css/bootstrap.min.css',
      'bootstrap/dist/fonts/*'
    ]
  });
};  

为了完整起见，引导程序的设置过程如下：

命令行：

npm install bootstrap --save

索引.html：

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

重新启动“ngserve”或仅使用“ngbuild”重建

这是页面源的结果：