Font Awesome 5 Angular

Question

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

我试过将它添加到一个组件中：

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.

导入相关图标：

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

将图标添加到 fontawesome 库 在全局范围内 （不在组件的构造函数内）：
```
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 个图标（专业版）
```

```

重要提示：

用变量来定义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放在上面。

进一步阅读：

Answer 2

我在 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;    
  }
}
`

Answer 3

最简单的方法是通过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>

Font Awesome 5 Angular

Font Awesome 5 with Angular

font-awesome

font-awesome-5

angular

angular-fontawesome

1. 使用angular-fontawesome 库

2.直接使用fontawesome 5