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>

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

Answer 1

你有两个选择:

---

1.使用angular-fontawesome库

只需按照他们的 github page 上的说明进行操作即可.

---

2.直接使用fontawesome 5

确保您已经安装了所有相关的 npm packages .
对于 Pro 包，请查看 this .

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 类是很好的，只要它只完成一次(在初始化时)。但是，如果变量改变了它的值，它不会反射(reflect)在 html 中。 考虑这个例子:

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

这将在初始化时放置正确的图标，但如果之后方向发生变化，则不会反射(reflect)出来。
这样做的原因是 fontawesome 5 用适当的 svg 替换了用 fa ... 分类的元素，一旦它被替换，没有变量影响这个.
如果你想让上面的 html 反射(reflect)运行时的变化，你必须像这样改变它:

<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 就可以了。

进一步阅读:

• Use fontawesome 5 with node.js
• FontAwesome API