前言
在开发前端界面的时候，图标的使用变得越来越普遍。而 Font Awesome 是一个广为人知的图标库，它具有丰富的图标以及良好的兼容性。在使用 Font Awesome 的时候，通常我们需要将其下载到本地，然后引入 CSS 文件以及一个用于存储字体文件的文件夹。但是这种方式存在一些问题，比如需要更新字体文件的时候需要重新下载。
为了解决这些问题，@pnotify/font-awesome5 这个 npm 包应运而生。它为 Font Awesome 提供了一种全新的引用方式，使得 Font Awesome 的使用变得更加的简单方便。
安装
要使用 @pnotify/font-awesome5，需要先安装它。在命令行中运行以下命令：
npm install --save @pnotify/font-awesome5
使用
下面我们来看一下如何在项目中使用 @pnotify/font-awesome5。
1. 引入 CSS
在使用之前，我们需要先引入 CSS 文件。在需要使用 Font Awesome 的地方，添加以下代码：
<link rel="stylesheet" href="./node_modules/@pnotify/font-awesome5/css/all.min.css">
2. 使用图标
现在我们可以在页面中使用 Font Awesome 图标了。在需要使用的地方添加以下代码：
<i class="fas fa-heart"></i>
其中，.fas 表示该图标使用的是 Font Awesome 的 solid 类型的图标，.fa-heart 表示该图标的名称。
3. 集成 Font Awesome
@pnotify/font-awesome5 除了可以使用单独的图标之外，还支持集成 Font Awesome。这样可以让你使用全部的 Font Awesome 图标。只需要在需要使用的地方添加以下代码：
import fontawesome from '@pnotify/font-awesome5';
然后我们就可以在任意地方使用 Font Awesome 的图标了：
<i class="fas fa-heart"></i> <i class="fab fa-github"></i> <i class="fal fa-user"></i>
示例代码
下面是一个完整的示例代码，你可以参考这个示例代码来使用 @pnotify/font-awesome5。
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------------- ----------
----- ---------------- -------------------------------------------------------------
-------
------
-------------
---
----------
----
-- ---------- --------------
-- ---------- ---------------
-- ---------- -------------
------- -----------------------------------------------------------------------
-------
-------结语
@pnotify/font-awesome5 可以帮助我们更加便捷的使用 Font Awesome 的图标，提升我们的开发效率。当然，在实际开发中，应该根据需要选择合适的引用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc80b5cbfe1ea06127da