1

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

我已经提到了字体真棒的文档。但是我很难找到这些文件的导入路径。

4

2 回答 2

2

获得 font-awesome 的一种方法是在 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">

从这里摘录

于 2019-12-30T23:10:52.807 回答
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';

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

@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>

这是一个有效的堆栈闪电战。我希望这对其他人有帮助。

于 2020-02-06T12:21:26.913 回答