提醒：本文最后更新于 2026-05-24 06:16，文中所关联的信息可能已发生改变，请知悉！
iconfont 怎么用是针对于 iconfont 这一矢量图标库如何提供矢量图标下载、在线存储、格式转换等功能的教程使用方法。
编辑
一、iconfont 软件工具介绍
利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和 PPI 下面，都可以做到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象。
二、iconfont 优点
1、自由变化大小
2、自由修改颜色
3、可以添加一些视觉效果如：阴影、旋转、透明度。
4、兼容 IE6
三、如何制作 iconfonts？
利用字体工具手动制作
1. 在 illustrator 或 Sketch 这类矢量图形软件里创建你的 icon。
2. 然后把 icon 一个一个导入到字体编辑工具，转换成 glyphs 进行编辑，设置对应的 unicode 编码。常用字体工具有：
Glyphs
FontForge
FontCreator
3. 完成 glyphs 编辑后，从字体工具导出 OTF 字体文件，然后利用 Font Squirrel 生成器来生成 web fonts 支持的格式。
利用在线工具自动生成
1. 参照 iconfont.cn 提供的图标制作模版，在 Illustrator 画布的 16×16 网格内，参考基线、上升部、下降部来调整图标大小和位置。
2. 然后从 Illustrator 保存为 SVG 文件，使用默认的 SVG 设置即可。
3. 拖动一个或多个 SVG 图标到 iconfont.cn 的上传表单，完成上传后会提示设置名称和 tag，点击「完成上传」开始生成 icon fonts。生成完成后，你可以点击要下载的图标加入购物车，然后「下载至本地」。
4. 解压刚下载的文件包，除了 EOT、SVG、TTF、WOFF 四种 web fonts 字体外，还有个 demo.html 展示所有 icons 及其对应的字体编码。
四、iconfont 注意事项
1. 首先是字体声明，由于各个浏览器所支持的字体文件不同，因此我们要针对浏览器的这个特点制作多种字体文件以达到兼容的目的。
2. 输入的时候如何知道要输入的字符是需要输入的 Icon 呢，只需要通过查阅 Unicode 对照表，根据字体制作软件中的 Unicode 码进行对比即可。
3. 我们制作 Icon Font 是为了自己之后使用的，因为一个方便管理并且使用的 html 组件页面是必不可少的，其中应该包括对 Icon 的描述、所对应的代码等等这些信息，目的就是在自己或者同事使用的时候可以很方便。
