关于CSS：Bootstrap Glyphicons不显示在angular2中


Bootstrap Glyphicons not displaying in angular2

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

1
2
3
 <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']

字形图标如下所示：
enter image description here

相关讨论

Boostrap 4不再支持Glyphicons，您可以改用Font Awesome：

1
npm install --save fortawesome/fontawesome-free

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
"apps": [
          {
             ....
            "styles": [
               "styles.css",
               "../node_modules/bootstrap/dist/css/bootstrap.css",
               "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],

将CSS类替换为Font Awesome类：

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

重新编译应用：ng serve

相关讨论

您必须导入

到您的index.html

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

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

1
2
3
4
  "styles": [
       "styles.css",
       "../node_modules/bootstrap/dist/css/bootstrap.css"
     ],
相关讨论

如果您的应用程序已被angular-cli(使用'ng init'或'ng new')构架，则项目根目录中有angular-cli-build.js文件。

angular-cli-build.js指示项目的构建(使用" ng serve"或" ng build")将第三方库放置到供应商文件夹中。

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

angular-cli-build.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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/*'
    ]
  });
};

为了完整起见，引导程序的设置过程分为以下几个步骤：

共同行：

1
npm install bootstrap --save

index.html：

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

重新启动" ng服务"或仅使用" ng build"进行重建

这是页面源的结果：

Glyphicon with trach glyph

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

我正在使用FontAwesome，在我的情况下是依赖项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 "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模板中，只需放置如下代码：

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

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

如果您通过styleUrls包含引导文件，这会引起问题，我不知道为什么，但是我发现浏览器在glyphicons的不同位置查找。

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

使用上述方法调用引导样式表文件会导致以下错误
"获取http：// localhost：4200 / fonts / glyphicons-halflings-regular.woff"

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

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

然后将以下行添加到index.html：

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

不要忘记ng serve或ng build

从https://www.w3schools.com/bootstrap4/bootstrap_icons.asp-

Bootstrap 4 does not have its own icon library (Glyphicons from bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons. To use Font Awesome icons, follow these steps:

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

1
npm install --save font-awesome

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

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

现在，您可以访问已安装的Font-Awesome库中的所有可用图标。 请参阅此链接以获取图标的完整列表-官方字体很棒的网站

我和@Sebastian Viereck做的一样。 但是我做到了

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

并在angular.json上

1
2
3
4
"styles": ["node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
           "src/styles.css"
 ],

看来fontawesome有新的付费版本

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

而是检查此页面上的提示：

Font Awesome now has an official Angular component that’s available
for all who want to easily use our icons in projects. If you are using
Angular, you need the angular-fontawesome package or Web Fonts with
CSS.

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

我在使用NPM时为我找到的最好的页面是此页面。

因此，基本上，您需要：

  • 在NPM中安装FontAwesome
  • 在您的app.module.ts中导入模块AngularFontAwesomeModule
  • 在angular-cli.json文件中添加CSS

    • 详细信息在上面的链接中进行了描述。

  • 要最终添加图标，您可以在app.component.html文件中添加一个关机图标：

    • 码：

    1
    <fa-icon [icon]="faPowerOff"></fa-icon>
  • 并且您需要在相关的app.component.ts文件中添加代码：

    • 码：

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

    重要提示！

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

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

    1
    npm install @fortawesome/[email protected]

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

    请跑

    1
    npm install glyphicons --save

    然后请在您的组件中导入glyphicons

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

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