随着前端技术的发展和应用的广泛，我们需要在项目中使用更多的字体图标。而字体图标的使用需要依赖一些库或者是在线工具来专门处理，这就需要我们在前端项目中引入一个前端 UI 字体图标管理工具，这个工具可以帮助我们更方便、快捷地管理字体图标。
其中一个非常好用的字体图标管理 npm 包就是 fontello-manager，它可以帮助我们自定义 UI 图标以及自动生成所需的字体文件和 CSS 样式文件。在本文中，我们将详细介绍如何安装和使用 fontello-manager 这个 npm 包。
安装 fontello-manager
使用 fontello-manager 之前需要安装 Node.js 和 npm。
打开终端，输入以下指令以安装 fontello-manager：
npm install -g fontello-manager
在安装过程中，可能会有一些警告，这个时候不用太过担心，这通常是由于包更新引起的一些兼容性问题。安装完成后，我们就可以在命令行中使用 fontello-manager 了。
使用 fontello-manager 生成字体图标
在安装完成 fontello-manager 后，我们就可以开始使用它来管理字体图标。
- 首先，打开你的浏览器，进入 Fontello 官网；
- 点击网站页面中的图标选择框来选择需要添加的图标；
- 点击“Customize Codes”以进入“Font Settings”面板，修改需要修改的图标代码；
- 点击“DOWNLOAD”按钮，将生成的 ZIP 文件下载到本地；
- 解压 ZIP 文件中的所有文件到你项目中的指定目录；
现在，我们可以在我们的项目中引用这些字体图标了。
引入 fontello-manager 的 CSS 样式文件
使用 fontello-manager 生成的字体图标不仅仅是一张图片，它们实际上是一个包含了所有图标的字体文件以及对应 CSS 样式文件。接下来，我们将会介绍如何引入这些文件到你的项目中。
在你的 HTML 文件中添加以下代码块，从而引入 CSS 样式文件：
<link rel="stylesheet" href="path/to/your/css/fontello.css">
在页面中使用 fontello-manager 的字体图标
现在，我们已经成功地引入了 fontello-manager 生成的字体图标的 CSS 样式文件。接下来，我们将会介绍如何在你的页面中使用这些图标。
在你的 HTML 页面中添加以下代码：
<i class="icon-xxx"></i>
其中，icon-xxx 代表你希望使用的字体图标的类名，这个类名对应的实际图标可以在 fontello-manager 网站上找到。
综合示例代码
以下是一个综合示例代码，帮助你更好的了解如何使用 fontello-manager 生成的字体图标：
-- -------------------- ---- -------
------------
---------- -
------------ -----------
---- ---------------------------------
---- --------------------------------------- ----------------------------
-------------------------------- -------------------
--------------------------------- ---------------
----------------------------------------- --------------
------------ -------
----------- -------
-
----------------- --------- ------- -
------------ -----------
----------- -------
------------ -------
------ -----
-------- -------------
---------------- --------
------ ----
------- ----
------------- -----
------------ -----
----------- -------
------------- -------
--------------- -----
--- -------------------- ---- ------- ---- ---------- --- --------- ----- ----- ------------- ------ ------ ---------------- ---------------- ------------- ------ ---------------- ------------------------ ------- ------ --- ---------------------- --- ----------------------- --- --------------------- ------- -------
总结
在本文中，我们介绍了如何使用 fontello-manager 这个 npm 包来管理前端 UI 的字体图标。我们通过安装 fontello-manager，生成字体图标，然后引入 CSS 样式文件和 HTML 页面中添加字体图标来实现了字体图标的使用。
希望本篇文章能够对你学习和使用 fontello-manager 有所启发，也希望你能够从本文中学到一些新的知识、技能和工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606d81e8991b448de927