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

Question

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

我参考了font awesome的文档。但是我无法找到要导入的那些文件的路径。

Answer 1

获得超赞字体的一种方法是在您的 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

Answer 2

您需要将以下 依赖项 添加到您的 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 是一个有效的 stackblitz。我希望这会对其他人有所帮助。

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

How to import font-awesome in STACKBLITZ JS project?

import

font-awesome

stackblitz