SVG图标秒变字体！从此图标随心调 —— svg图标字体制作方法介绍
超级管理员2025-06-11本站1036
我们在做项目的时候，通常会用到大量的小图标，不仅丰富页面，也会增加用户的可读性，例如ElementUI组件库中的Icon图标这些图标在使用的时候只需要在样式文件中用@font-face嵌入字体文件(格式一般为.ttf/.otf/.woff等)，然后在样式中调用即可。例如：<i class='icon-name'></i>前端即可展示高清图标，还
我们在做项目的时候，通常会用到大量的小图标，不仅丰富页面，也会增加用户的可读性，例如ElementUI组件库中的Icon图标这些图标在使用的时候只需要在样式文件中用@font-face嵌入字体文件(格式一般为.ttf/.otf/.woff等)，然后在样式中调用即可。例如：<i class='icon-name'></i>前端即可展示高清图标，还可以在样式中随意改变字体（图标）大小，颜色。既然这么好用，那如何制作我们自己的图标库呢？或者说我有一个字体（图标）文件，但是我并没有说明文档来查看调用样式，这又该怎么办呢？今天我们就带大家一步步制作我们自己的图标库，并且深入了解一下字体文件如何查看的问题。设计师用原型工具（figma、mastergo等）制作好svg小图标，并且给它命好名（这个名字就是我们要调用的样式名）。打开在线字体制作工具https://icomoon.io/（也可以用其他字体工具制作）这个工具的好处是可以批量导入，一键下载demo文件。在“selection”标签的头部选择“import”导入我们刚刚制作好的svg文件（全选批量导入）。调整好字体格式（颜色、字号），选择我们刚刚导入的图标（鼠标按住左键滑动可以多选）选中需要导出字体文件的图标，点击页面下方的“Generate Font ”按钮，在字体预览页面我们可以预览图标、图标样式名、查看图标编码等。字体制作没有问题了以后，我们可以点击页面右下角的“download”按钮，下载字体文件。查看文件包，文件夹包含fonts文件夹，css样式文件和页面demo。至此，我们便可以在自己的页面中使用@font-face嵌入字体文件调用。使用时只需要将fonts文件夹和style.css这两部分复制到我们自己的项目中，文件嵌入style.css样式，使用图标的地方根据demo中的样式名调用图标class即可。这里的demo文件就想到与图标文档，查看字体（图标）使用方法上面说的是按照正常流程制作的图标字体，能够查询到字体文档，若是没有demo文件，只有.ttf，查不到字体样式的情况我们要怎么处理呢？其实，也很简单，只需要使用字体工具打开字体文件，查看字体名称（即class名称），这里再推荐一款在线工具：https://font.qqe2.com/它也可以在线编辑字体文件，用它打开我们的字体文件，便可以查看、修改文件。这里我们就查看到了字体的编码，再到样式文件中查找对应的样式名。也有一些文件可以查看到字形名称（一般为样式名），直接使用即可。这样看起来是不是挺简单的，利用这两个工具我们可以灵活制作属于我们自己的图标库。你们也来试试吧！
微信收款码
支付宝收款码