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