字体真棒5与Angular

发布时间：2020-12-17 08:01:10 所属栏目：安全来源：网络整理

导读：如何在角度(2)中使用 font-awesome 5 ？我已经尝试在组件中添加它： import {faChevronLeft,faChevronRight} from '@fortawesome/fontawesome-free-solid';import fontawesome from '@fortawesome/fontawesome';...constructor(){ fontawesome.library.add(

如何在角度(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放在它上面。

进一步阅读：

> Use fontawesome 5 with node.js
> FontAwesome API

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!