带有 Angular 的 Font Awesome 5

发布于12月30日

如何将font-awesome 5与Angular (2+)配合使用？

我try 在组件中添加以下内容:

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>

但这给了我一个圆圈里闪烁的问号.

1.使用图书馆

只要按照他们github page的指示go 做就行了.

2.直接使用Fontawese5

确保你已经安装了所有相关的npm packages

导入相关图标:

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

将图标添加到fontawesome库in global scope(不在组件的构造函数内):
```
fontawesome.library.add(faChevronLeft, faChevronRight);
```

在html中使用它:

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

注意html中的前缀:
- fas表示fontawesome-free-solid个图标(也适用于fa)
```

```
- fab代表fontawesome-free-brands个图标
```

```
- far代表fontawesome-free-regular个图标
```

```
- fal代表fontawesome-free-light个图标(专业版)
```

```

Important note:

只要完成一次(初始化时)，就可以使用变量定义fontawesome个类.然而，如果变量改变了它的值，它将不会反映在html中.

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

这将在初始化时放置正确的图标，但如果之后方向发生变化，它将不会被反映出来

<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放在上面.

Further reading: