Bootstrap Glyphicons 未以 angular2 显示

Posted 2023-03-06

【中文标题】Bootstrap Glyphicons 未以 angular2 显示

【英文标题】：Bootstrap Glyphicons not displaying in angular2

【发布时间】：2016-10-21 08:09:55

【问题描述】：

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

 <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']

字形图标如图所示-

【问题讨论】：

看这里：***.com/questions/35659094/…

您可以检查控制台是否有404 错误，它会尝试加载字体文件。

fyi，Bootstrap 4 放弃了 Glyphicon 图标字体

删除了 Glyphicons 图标字体。如果您需要图标，一些选项是：Glyphicons Octicons Font Awesome 的上游版本

【参考方案1】：

如果您使用的是 bootstrap 4 glyphicon 不再受支持，您应该尝试旧版本

【参考方案2】：

Boostrap 4 does not support 不再使用 Glyphicons，您可以改用 Font Awesome：

npm install --save fortawesome/fontawesome-free

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

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

【讨论】：

就我而言，我没有 angular-cli.json 文件。相反，我在 src/styles.css 中添加了：@import "~font-awesome/css/font-awesome.css" 在此之后它就像一个魅力！

通过上面的评论，我注意到只有常规图标对我有用。不是其他的。按照下面文章中的步骤，一切正常，我可以使用类型图标而不是使用类：npmjs.com/package/angular-font-awesome

安装简单见Official Angular component for Font Awesome 5

【参考方案3】：

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

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

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

npm install --save font-awesome

然后将以下行添加到您的主样式表中 -

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

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

【参考方案4】：

我和@Sebastian Viereck 做了同样的事情。但我做到了

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

在 angular.json 上

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

看来fontawesome又有新的付费版本了

【参考方案5】：

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

请查看this page 上的提示：

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

这意味着在 Angular 项目中您需要使用以下包：Angular FontAwesome

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

所以基本上你需要：

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

上面的链接里都有详细介绍。

要最后添加一个图标，您可以在 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 文件中。

【参考方案6】：

请运行

npm install glyphicons --save

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

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

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

【参考方案7】：

如果您使用的是 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>

【参考方案8】：

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

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

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

【讨论】：

我也有同样的问题。我尝试了这个解决方案，但没有运气......有什么想法吗？

问题在于我的 index.html 中有 bootstrap 4.x --> 用 maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 替换它。

谢谢。我的问题是引用 bootstrap.min.css 而不是 bootstrap.css。

这行得通！用 bootstrap.min.css 代替 bootstrap.css

【参考方案9】：

你必须导入

<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

【参考方案10】：

如果您通过 styleUrls 包含引导文件，这将产生问题，我不知道为什么，但我发现 borwser 在不同的位置查找字形图标。

@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 文件中将dist 引导程序文件夹添加为'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)'，并从styleUrls 中删除引导程序样式表。

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

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

别忘了ng serve 或ng build

【参考方案11】：

如果您的应用程序已被 angular-cli（使用 'ng init' 或 '新的'）。

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

fonts 文件夹，在 bootstrap 分发文件夹中，保存 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/*'
    ]
  );
;  

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

命令行：

npm install bootstrap --save

index.html：

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

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

这是页面来源的结果：