Question

我们目前正在建立一个第三方角库。我们正在设计第三方组件，并使用超赞的字体进行设计。

我们已经在渲染组件的主机应用程序中安装了真棒字体npm软件包。

但是图标未按预期显示。有什么办法可以在我们的库中包含超棒的字体包？

Answer 1

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

Promises

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

Answer 2

除了乔所说的以外，您还可以添加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 { }

Answer 3

如果您使用ng-packagr制作角度库，则可以将其添加到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"
    ]
  }

包括Angular库中的真棒字体

3 个答案: