带有 Angular 的 Font Awesome 5

Question

如何在 Angular (2+) 中使用 font-awesome 5？

我尝试在组件中添加这个：

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

然后在 HTML 中：

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

但这给了我一个在圆圈中闪烁的问号。

Answer 1

你有两个选择：

---

1. 使用 angular-fontawesome 库

只需按照他们的github page 上的说明进行操作即可。

---

2. 直接使用fontawesome 5

确保您已安装所有相关的npm packages。
对于 Pro 包，请查看 this。

1. 导入相关图标：

   import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
   import fontawesome from '@fortawesome/fontawesome';
   

2. 将图标添加到fontawesome 库在全局范围内（不在组件的构造函数内）：

   fontawesome.library.add(faChevronLeft, faChevronRight);
   

3. 在html中使用：

   <span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>
   

4. 注意 html 中的前缀：

   • fas 用于fontawesome-free-solid 图标（也适用于fa）

     <span class="fas fa-chevron-left"></span>
     

   • fab 用于fontawesome-free-brands 图标

     <span class="fab fa-bitcoin"></span>
     

   • far 用于fontawesome-free-regular 图标

     <span class="far fa-chevron-left"></span>
     

   • fal 用于fontawesome-free-light 图标（专业版）

     <span class="fal fa-chevron-left"></span>
     

重要提示：

使用变量来定义fontawesome 类是很好的，只要它只完成一次（在初始化时）。但是，如果变量更改其值，它将不会反映在 html 中。 考虑这个例子：

<span class="fas fa-chevron-{{direction}}"></span>

这将在初始化时放置正确的图标，但如果之后方向改变，它将不会被反映。
原因是fontawesome 5 用适当的svg 替换了以fa ... 分类的元素，并且一旦被替换，任何变量都不会影响这一点。
如果您希望上面的 html 反映运行时更改，您必须像这样更改它：

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

外部span 是必要的，因为内部span 被svg 替换，所以你不能在上面放*ngIf。

进一步阅读：

• Use fontawesome 5 with node.js
• FontAwesome API

Answer 2

最简单的方法是通过npm安装，然后导入样式：

1)

npm i @fortawesome/fontawesome-free --save

2) 在 angular.json

中导入样式

"styles": [
  ...
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
  ...
]

然后你就可以在他们的documentation 中使用它了

<i class="fas fa-address-card"></i>

Answer 3

我在 Angular 中使用 Font Awesome 5

这是 HTML 代码

<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>

这是我的组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
isFavorite: boolean;
  prefix:string;
  constructor() { }    
  ngOnInit() { }

  onClick(){
    this.isFavorite = !this.isFavorite;    
  }
}
`