字体真棒5与Angular

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页面上的说明操作即可.

2.直接使用fontawesome 5

确保已安装所有相关的npm包.
对于Pro包,请查看此内容.

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替换归类的元素,一旦被替换,没有变量影响这个. 如果您希望上面的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它.

进一步阅读:

• 与node.js一起使用fontawesome 5
• FontAwesome API

Answer 2

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