angular - 带有 Angular 的 Font Awesome 5

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>

但这给了我一个闪烁的问号。

score 76 · Accepted Answer

你有两个选择：

1. 使用 angular-fontawesome 库

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

2.直接使用fontawesome 5

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

导入相关图标：

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图标
```

```
- falfontawesome-free-light图标（专业版）
```

```

重要的提示：

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

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

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

<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它。

进一步阅读：

score 42 · Accepted Answer

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

1)

npm i @fortawesome/fontawesome-free --save

2) 在angular.json中导入样式

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

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

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

score 4 · Accepted Answer

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

angular - 带有 Angular 的 Font Awesome 5

3 回答 3

1. 使用 angular-fontawesome 库

2.直接使用fontawesome 5

Related

Reference