Question

我正在尝试在angular2 app中使用bootstrap glyphicons。我使用命令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']

如下图所示，glyphicon显示为 -

Answer 1

Boostrap 4 does not support 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'或''进行支架，则项目根目录中有 angular-cli-build.js 文件ng new'）。

angular-cli-build.js 指示项目的构建（使用“ng serve”或“ng build”）将第三方库放入 vendor 文件夹

在bootstrap分发文件夹中有 fonts 文件夹，其中包含glyphicons文件。这些引导程序文件也需要放在供应商文件夹中。

angular-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/*'
    ]
  });
};

为了完整性，bootstrap的设置过程在以下几个步骤中进行：

Commnad line：

npm install bootstrap --save

<强>的index.html ：

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

重新启动'ng serve'或仅使用'ng build'重建

以下是页面来源的结果：

Answer 5

如果您使用的是Bootstrap 4，则自我发布中不包含glyphicon。因此，您可以使用另一个图标包，如FontAwesome或单独安装Glyphicons。

我在我的案例中使用FontAwesome和依赖项：

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

在HTML模板中，只需放置如下代码：

<i class="fa fa-refresh" aria-hidden="true"></i>

Answer 6

如果你通过styleUrls包含bootstrap文件，这会产生问题，我不知道为什么，但我发现borwser在不同位置查看glyphicons。

@Component({
   moduleId: module.id,
   selector: 'app-projects',
   templateUrl: 'projects.component.html',
   styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
   providers:[ProjectsService]
})

使用上述方法调用bootstrap样式表文件会导致以下错误＆＃34;获取http://localhost:4200/fonts/glyphicons-halflings-regular.woff＆＃34;

您可以从错误中看到的是，浏览器正在查看localhost:4200/fonts/...应该在哪里localhost:4200/vendor/bootstrap/dist/fonts/...

无论如何，解决方法是确保在dist数组angular-cli-build.js文件中添加vendorNpmFiles引导程序文件夹'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)'并从{styleUrls中删除引导程序样式表1}}。

然后在index.html中添加以下行：

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

不要忘记ng serve或ng build

Answer 7

如果您不再使用bootstrap 4 glyphicon，则应尝试使用旧版本

Answer 8

请运行

npm install glyphicons --save

然后请在您的组件中导入字形图标

 import icons from 'glyphicons';
    var icons = require('glyphicons');
    console.info('This is' + icons.heart+ ' Glyphicons!')

您可以在浏览器控制台中检查一次。

Answer 9

FontAwesome的建议是正确的，但只是部分建议。如果仅按照FontAwesome的说明进行操作，您将在Angular项目中失败。

请检查this page上的提示：

Font Awesome现在拥有一个正式的Angular组件对于所有想要在项目中轻松使用我们的图标的人。如果您正在使用 Angular，您需要使用angular-fontawesome软件包或带有 CSS。

好的，这意味着在Angular项目中，您需要使用以下程序包：Angular FontAwesome

使用NPM时，为我找到的最好的页面是this page。

所以基本上您需要：

在NPM中安装FontAwesome
在您的 app.module.ts
在 angular-cli.json 文件

详细信息在上面的链接中都有描述。

要最终添加图标，您可以在 app.component.html 文件中添加电源关闭图标：

代码：

<fa-icon [icon]="faPowerOff"></fa-icon>

并且您需要将代码添加到相关的 app.component.ts 文件中：

代码：

    import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
    ...
    export class AppComponent implements OnInit {
      faPowerOff = faPowerOff;
    ...

一个重要提示！

请意识到您需要在NPM中为您的Angular版本安装正确的 AngularFontawesome版本。检查this page的兼容性表。

我使用了Angular 5，所以我必须像这样安装它：

npm install @fortawesome/angular-fontawesome@0.1.1

该条目将被添加到您的 package.json 文件中。

Answer 10

我所做的与@Sebastian Viereck相同。但是我做到了

System.Windows.Input

并在angular.json上

npm install --save-dev @fortawesome/fontawesome-free

fontawesome似乎有新的付费版本

Answer 11

来自https://www.w3schools.com/bootstrap4/bootstrap_icons.asp-

Bootstrap 4没有自己的图标库（BS4不支持Bootstrap 3的Glyphicons）。但是，有许多免费的图标库可供选择，例如Font Awesome和Google Material Design图标。要使用“真棒字体”图标，请按照以下步骤操作：

从终端在项目文件夹中安装Font-Awesome

npm install --save font-awesome

并将以下行添加到您的主样式表-

@import "~font-awesome/css/font-awesome.css";

您现在可以访问已安装的Font-Awesome库中的所有可用图标。请参阅此链接以获取图标的完整列表-Official Font Awesome Website

Bootstrap Glyphicons没有以angular2显示

11 个答案: