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 library

只需按照github page上的说明操作即可。

2.直接使用fontawesome 5

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

导入相关图标：

  PriorityQueue<ArrayList<Integer>> heap = new PriorityQueue<ArrayList<Integer>>(10, new Comparator<ArrayList<Integer>>(){
            public int compare(ArrayList<Integer> list1, ArrayList<Integer> list2) {
                return list1.get(2) - list2.get(2);
            }

将图标添加到全局范围内的import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid'; import fontawesome from '@fortawesome/fontawesome';库（不在组件的构造函数中）：
```
fontawesome
```

在html中使用它：

fontawesome.library.add(faChevronLeft, faChevronRight);

注意html中的前缀：
- 代表fas图标（也适用于fontawesome-free-solid）
```
fa
```
- 代表fab图标
```
fontawesome-free-brands
```
- 代表far图标
```
fontawesome-free-regular
```
-  fal图标（专业版）
```
fontawesome-free-light
```

重要提示：

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

fontawesome

这将在初始化时放置右图标，但如果方向发生变化，则不会反映出来这样做的原因是会将fontawesome 5分类的元素替换为适当的fa ...，一旦被替换，任何变量都不会对此产生影响。
如果您希望上面的html反映运行时更改，您必须更改它：

svg

外部 是必要的，因为内部span已替换为span，因此您无法将svg放在其上。

进一步阅读：

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

字体真棒5与Angular

3 个答案:

1.使用angular-fontawesome library

2.直接使用fontawesome 5