在前端开发中，图标的使用经常会遇到各种问题，例如图标库的引入、图标的样式设置等。这时候，一个好用的图标库就显得十分必要。ngx-font-awesome（下文简称为 ngx-fa）就是这样一个非常实用的图标库，它为我们提供了丰富的图标，并且支持了多种设置方式，使用起来非常便捷。
什么是 ngx-fa
ngx-fa 是基于 font-awesome 的 Angular 图标库。ngx-fa 提供了丰富的图标，同时支持多种设置方式。
值得一提的是这个包还有正版，正版更加丰富，可以去 fontawesome 官网购买。
安装 ngx-fa
安装 ngx-fa 非常简单，只需要使用 npm 命令即可：
npm install @fortawesome/fontawesome-free npm install @fortawesome/angular-fontawesome npm install font-awesome
到这里，ngx-fa 就安装完成了。
使用 ngx-fa
在使用 ngx-fa 之前，我们需要先在 app.module.ts 中导入 Angular 的 FaIconLibrary 类：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------------------
------ - --- - ---- ------------------------------------
-----------
----
--
------ ----- --------- -
-------------------- -------------- -
--------------------------
-
-在这里，我们使用 addIconPacks 方法将 FontAwesome 的 Solid 图标集添加到了 FaIconLibrary 中。
接着，在我们需要使用图标的组件中，导入 FontAwesome 的图标类，例如 faCoffee 图标：
-- -------------------- ---- ------- ------ - -------- - ---- ------------------------------------ ------------ ---- -- ------ ----- ----------- - ---- - --------- -
最后，在 HTML 模板中，使用 fa-icon 标签引入图标并设置它的外观和行为：
<fa-icon [icon]="icon" [spin]="true" [size]="3x"></fa-icon>
以上是一个使用 ngx-fa 的完整流程，简单易懂。
ngx-fa 的高级用法
使用自定义图标
还有一种稍微高级一些的使用 ngx-fa 的方式，就是使用自定义图标，让图标更符合需求。
这里，我们以修改 faCheckCircle 图标为例：
-- -------------------- ---- ------- ------ - -------------- - ---- ------------------------------------ ------ - ------------- -- -------------- - ---- ------------------------------------ ----- --------------- -------------- - ----------------------------- - --------- ------------------ --- ------------ ---- -- ------ ----- ----------- - ---- - --------------- -
这段代码就是将原来的 faCheckCircle 图标修改为了 cal-check-circle 图标，并添加了一个自定义的 iconName 属性。
在HTML模板中的使用方式同样发生了改变：
<fa-icon [icon]="icon" [spin]="true" [size]="3x"></fa-icon>
图标的样式和颜色
在 ngx-fa 中，我们可以为图标设置样式和颜色，以便于更好的展示。
<fa-icon [icon]="icon" [spin]="true" [size]="3x" [class]="'text-primary'"></fa-icon>
在这里，我们将 fa-icon 元素的 class 设置为 'text-primary'，原因是这个把图标颜色修改为了 primary 颜色。
图标的旋转和动画
有时候，我们还需要为图标设置旋转或者动画，以提高其曝光度。
<fa-icon [icon]="icon" [spin]="true" [size]="3x" [class]="'text-primary'" [animation]="{ name: 'spin', duration: 1000 }"></fa-icon>在这里，我们将 fa-icon 元素的 [animation] 属性设置为 { name: 'spin', duration: 1000 }，原因是这个将图标设置为了旋转状态，并且旋转速度为1000毫秒。这个动画是预设的。
图标的堆叠
有时候，我们还需要在一个元素中使用两个图标，而这时候，我们就需要使用图标的堆叠功能了。
<fa-stack [size]="2x"> <fa-icon [icon]="faSquare" [stackItem]="true"></fa-icon> <fa-icon [icon]="faTwitter" [stackItem]="true" [inverse]="true"></fa-icon> </fa-stack>
在这里，我们使用了 fa-stack 元素将两个图标 faSquare 和 faTwitter 堆叠，并且将它们的大小都设为了 2x。注意，要在 fa-icon 元素中设置 [stackItem]="true" 属性，这个属性告诉 ngx-fa 这个元素是一个堆叠元素。
现在，我们已经可以熟练地使用 ngx-fa 了。需要注意的是，除了上面所说的基本使用方式和高级用法外，ngx-fa 还有很多其他的设置，大家可以自行查看官方文档，并学习它的更多用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53dd0