如何在角度(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>
但这给了我一个圆圈中闪烁的问号。
你有两个选择：
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)
<span class="fas fa-chevron-left"></span>
>为fontawesome-free-brands图标制作
<span class="fab fa-bitcoin"></span>
>远远超过fontawesome-free-regular图标
<span class="far fa-chevron-left"></span>
> faltawesome-free-light图标(专业版)
<span class="fal fa-chevron-left"></span>
重要的提示：
一旦完成一次(在初始化时)，就可以使用变量来定义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>
外跨度是必要的，因为内部跨度被svg替换，所以你不能把* ngIf放在它上面。
进一步阅读：
