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

并将其添加到 imports 数组：

@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是有效的堆叠闪电战。我希望这会对其他人有所帮助。

Answer 2

获得令人敬畏的字体的一种方法是将下一行添加到index.html中：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Excerpt from here

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

2 个答案: