在前端开发中，添加图标是一个常见的需求。为了快速方便地添加图标，我们可以使用 npm 包 fontawesome。
什么是 fontawesome ？
fontawesome 是一套开放源代码的图标字体库，提供了超过 6000 个图标。这些图标基于集向量图形，并提供了多种图标使用方式，方便开发者使用。
安装 fontawesome
通过 npm 安装 fontawesome： npm install @fortawesome/fontawesome-free
在我们的项目中，仅需要在 HTML 的 head 标签中引入 “fontawesome.min.css” 文件就可以使用 fontawesome 字体库中的图标了。
------ ----- ---------------- ------------------------------------------------------ -------
fontawesome 图标使用方法
使用 fontawesome 很简单，只需在 HTML 中添加相应的标签即可。例如，下面两段代码都可以在页面中添加一个搜索图标。
使用 i 标签添加
-- --------- ---------------
使用 span 标签添加
----- --------- ------------------
我们也可以通过 fontawesome 提供的工具添加一些样式，比如旋转、动画、透明度等：
旋转图标
-- --------- ---------- -------------
这段代码可以把一个 “fa-spinner” 图标设置为旋转的状态。
动态图标
-- --------- ------ -------------
这段代码可以把一个 “fa-cog” 图标设置为旋转的状态，表示正在工作。
透明度
-- --------- -------- ------ --------------- ----------
这段代码可以把一个大小为 3x 的 “fa-check” 图标设置成半透明状态。
总结
fontawesome 是一个非常实用的工具，拥有丰富的图标库和操作方式。在日常的前端开发中使用 fontawesome 能够轻松满足大部分图标的需求，极大地提高了项目开发的效率和质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb619b5cbfe1ea06114d9