import - 如何在 STACKBLITZ JS 项目中导入 font-awesome？

Question

我正在 STACKBLITZ 中开发一个纯 JavaScript 项目(没有任何框架)。它有一个安装依赖项的选项。但是如何将其导入到我的index.js 文件中，以便我可以在我的HTML 文件中使用。

我已经引用了很棒的字体的文档。但我无法找到这些文件的导入路径。

Answer 1

您需要将以下依赖项添加到您的package.json中:

"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.21",
"@fortawesome/free-solid-svg-icons": "^5.12.1"

在您的app.module.ts中导入FontAwesomeModule:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

并将其添加到导入数组中:

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

要在组件模板中使用例如 faThumbsUp、faThumbsDown 图标，您必须将它们导入到组件的 .ts 中文件。

import { faThumbsUp, faThumbsDown } from '@fortawesome/free-solid-svg-icons';

向组件添加属性并为其分配这些图标:

export class VoterComponent  {
  @Input() name: string;

  faThumbsUp = faThumbsUp
  faThumbsDown =  faThumbsDown

}

使用组件的模板或其.html文件中的属性(即图标)，如下所示:

<div class="col-sm-2">
<button class="btn btn-primary">  
  <fa-icon [icon]="faThumbsUp"></fa-icon>
</button> 

Here是一个正在运行的 stackblitz。我希望这对其他人有帮助。