介绍
在开发 Web 应用过程中，icon 经常被用来表达特定的含义，以及增强网站的用户体验。其中，Font Awesome 是目前最受欢迎的图标字体库之一。而 Fontello 可以让你自定义图标并下载字体，它允许用户从 50 多个字体库中选择图标，以及上传自己的 SVG 图标进行定制。在 Fontello 页面上，你可以将选择的图标打包下载成一个字体包（包含 css、字体文件、映射等）并用于你的网站。
使用 grunt-fontello-svg 这个 npm 包，我们可以更加轻松地将自定义的 SVG 图标加入项目中，并使用 CSS 控制字体图标的样式。在这篇文章里，我们将会讲解如何使用 grunt-fontello-svg 这个包，将自定义图标添加到已有的 Fontello 字体包中，以及如何将其加入到我们的项目中。
安装 grunt-fontello-svg
运行以下命令进行安装：
npm install grunt-fontello-svg --save-dev
使用 grunt-fontello-svg
安装完成后，在 Gruntfile.js 中注册 fontello 任务。在任务中，你需要设置配置项，比如：
src: 字体包的 zip 文件路径；dest: 导出文件的目标路径；font: 生成的字体的文件名；css: 生成的 CSS 文件的文件名；options: 可选项，可以设置一些字体图标的默认值，比如字体大小等。
配置好 grunt-fontello-svg 后，通过以下命令运行任务即可：
grunt fontello将自定义图标加入字体包中
在 Fontello 编辑器中完成 SVG 图标的制作，并保存为一个字体包（zip 文件）。要将新的自定义 SVG 图标加入字体包中，我们需要提取出字体包内部的 svg 文件以及配置文件 config.json。
-- -------------------- ---- ------- ---- ------------ ---- ---- ---- ------------ ---- ------------ ---- ------------ ---- ------------- ---- --- ---- ------------- ---- ------------ ---- ---------------- ---- ---------------------- ---- ------------------ ---- -----------展开代码
解压该文件后，将目标 SVG 文件覆盖到 fontello.svg 同级目录中，并在 config.json 文件中添加对应的图标信息。比如：
-- -------------------- ---- ------- - ------- ----------- ------------------ -------- -------------- --- --------- - - ------ -------------- ------ ---------------- ------- ------ ------ ------------------------ ----------- ---- - - -展开代码
在上述 config.json 的 glyphs 数组中添加一项即可，其中：
uid: 新图标的唯一标识，注意不能与已有的重复，因为唯一标识符将用于代码中引用该图标；css: 用于命名新图标的 CSS 类，将该类加到 HTML 节点中，就可以调用该图标了；code: 新图标的 Unicode 码值，注意不能与已有的重复，该值同样将用于代码中引用该图标；src: 新图标的 svg 文件路径，关于路径可以参考 Fontello 的官方文档。
完成 config.json 文件的编辑后，将整个文件夹打包成 zip，作为字体包导入到 Fontello 网站即可。
在项目中使用自定义字体图标
现在我们将自定义的字体图标导入到了 Fontello 的网站中，那么该如何在项目中调用新的字体图标呢？假设你需要在页面中使用新的字体图标，你需要：
- 在你的项目文件夹中新建一个 gruntfile.js 文件，并添加相应的插件与配置项：
-- -------------------- ---- ------- -------------- - --------------- - ------------------ --------- - ---- ----------------------- ----- ---------------------- ----- ----------- ---- ---------- - --- ----------------------------------------- --展开代码
- 运行 grunt 命令，在项目中生成 fontello 文件夹，包含了字体文件和样式文件；
fontello.eotfontello.ttffontello.wofffontello.svgfontello.css
- 将
fontello.css文件中的样式复制到你的样式表中，并将fontello类添加到 HTML 元素的类列表中：
<span class="icon custom-before"></span>
至此，我们已经成功添加了自定义的字体图标，并在项目中使用它们。
总结
在本文中，我们讲解了如何使用 grunt-fontello-svg 这个 npm 包为我们的项目添加自定义的字体图标。如果你平常的工作或者学习中需要使用 icon 图标，或许这篇文章会给你一个方便快捷的解决方案。是不是很简单呢？快来尝试一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196904
