在 Angular 库中包含令人敬畏的字体答案

【问题标题】：including font-awesome in an Angular Library在 Angular 库中包含令人敬畏的字体
【发布时间】：2018-10-12 05:46:13
【问题描述】：

我们目前正在构建第 3 方 Angular 库。我们正在设计第 3 方组件，并使用 font-awesome 来设计相同的组件。

我们已经在渲染组件的宿主应用程序中安装了 font-awesome npm 包。

但图标未按预期显示。有没有办法在我们的库中包含 font-awesome 包？

【问题讨论】：

标签： angular font-awesome

【解决方案1】：

除了 Joe 所说的之外，您还可以添加 integrity 标志：

使用 Font Awesome 的免费 CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

其他选项有：

作为 npm 的包管理器：

npm install @fortawesome/fontawesome-free

角度： 有一个official Angular component:

根据官方文档中的文档，步骤如下：

纱线：

  yarn add @fortawesome/fontawesome-svg-core \
  yarn add @fortawesome/free-solid-svg-icons \
  yarn add @fortawesome/angular-fontawesome

src/app/app.component.html

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>

src/app/app.component.ts

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;
}

导入组件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

【解决方案2】：

如果您使用的是 4.7.0 版，请在 index.html 中添加：

<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">

对于其他版本，请添加相应的路径。

【讨论】：

库中没有 index.html
@Mel 在哪个库中缺少 index.html？

【解决方案3】：

如果你使用 ng-packagr 制作 Angular 库，你可以将它们添加到 ng-package.json 中。

这就是我为库添加 bootstrap、bourbon 和 bourbon-neat 的方式。

 "lib": {
    "entryFile": "src/public_api.ts",
    "cssUrl": "inline",
    "styleIncludePaths": [
      "src/assets/styles",
      "../../node_modules/bourbon/app/assets/stylesheets",
      "../../node_modules/bourbon-neat/app/assets/stylesheets",
      "../../node_modules/bootstrap/dist/scss/bootstrap"
    ]
  }

【讨论】：