在前端开发过程中，字体图标的使用频率越来越高。而 npm 包 fontello 可以帮助我们轻松地将自定义图标打包成字体，并能够快速集成到项目中。
本教程将详细介绍如何使用 npm 包 fontello，包括如何导入自定义图标，如何配置上传选项，如何使用生成的字体。
安装 fontello
使用 npm 包管理工具进行安装：
npm install fontello-cli --global
导入自定义图标
- 登录 fontello 官网
- 点击 "Select custom icons"，将自定义图标的 SVG 文件批量拖到上传区域
- 点击 "Set name and options"，可以设置字体的名称、前缀、文件类型和字体路径等
- 点击 "Save session"，保存配置选项
- 点击 "Download"，将生成的字体下载到本地
配置上传选项
在上传自定义图标的过程中，可以添加/删除、修改图标，修改图标的 Unicode 码位和名称等，也可以设置字体路径、字体格式、子集等选项。
如果需要在多个项目中使用同一个字体，可以设置子集，将只包含特定字形的字体下载到本地。
使用生成的字体
将下载的字体文件（包含 .css、.eot、.svg、.ttf 和 .woff 等文件）放入项目的 fonts 目录下，在需要使用字体图标的地方使用 CSS 调用即可。
例如，在 HTML 文件中使用字体图标：
<i class="icon-heart"></i>
在 CSS 文件中，可以为不同的图标定义样式：
.icon-heart:before {
content: "\e607";
}示例代码
下面是一个简单的示例代码。首先，我们需要下载生成的字体，将其中的 .css、.eot、.svg、.ttf 和 .woff 等文件放入项目的 fonts 目录下。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
----- ---------------- ----------------------------
-------
------------------ -
-------- --------
------ ----
-
----------------- -
-------- --------
------ -------
-
--------
-------
------
-- -----------------------
-- ----------------------
-------
-------总结
npm 包 fontello 可以帮助我们轻松地将自定义图标打包成字体，并能够快速集成到项目中。本教程介绍了 fontello 的安装、导入和配置选项，以及生成的字体的使用。希望能够帮助前端开发者更好地使用字体图标，提升网站和应用的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3b0