制作自己的 Icon Font
在“使用 Icon Font”的教学文已经介绍了如何使用 Icon Font，这篇教学会介绍如何绘制适合的 SVG，并将 SVG 转换成 Icon Font，制作自己的专属的 Icon Font。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
绘制 SVG Icon 注意事项
产生 Icon Font 必须是“SVG 格式”的向量图形，因此通常会使用向量绘图软件绘制，或将位图转换成向量图形，除此之外，还有下列几点注意事项，基本上只要稍加注意，就能绘制出漂亮的 Icon Font。
1、绘制单色剪影向量图形
转换成 Icon Font 的图形只支援向量图形，并只会保留“路径”，因此制作时此用“剪影”的概念制作单色图形，需要留白区域都必须裁切“镂空”，勿使用白色填充，下方范例图展示有镂空和没有镂空的效果差异。
注意，尽可能透过“复合路径”的方式包装复杂的形状，避免产生多个路径。
2、整体尺寸使用“正方形”，画布的高度等于字体的“行高”
当 Icon Font 要与文字对齐时，通常默认会透过 baseline 对齐，而不同转换工具对于 base line 的设定有所不同，IcoMoon 默认的 baseline 距离底部 6.25% ( 可以修改 )，Fontello 默认的 baseline 距离底部 15% ( 可以修改 )，如果希望产生的 Icon Font 与文字进行 baseline 的对齐，设计 SVG 就必须注意和边缘的距离，下方范例图展示不同边框间距的效果差异。
更多参考：文字行高、文字缩排
使用 IcoMoon 自制 Icon Font
打开 IcoMoon 工具，点击上方“Import Icons”，上传自己制作的 SVG Icon。
- 前往 IcoMoon APP：https://icomoon.io/app/
- 范例文件：icon-oxxo.svg、icon-dog.svg、icon-poo.svg
上传完成点击“Generate Font”开始产生 Icon Font。
如果预览没有问题，点击“Download”按钮就可以下载文件，或者也可以点击上方“Preferences”进行细部设定，例如 baseline 的位置等等。
完成后使用 style.css，就能出现自己制作的 Icon Font。
<html>
<head>
<meta charset="utf-8">
<title>OXXO 自製 Icon Font</title>
<link rel="stylesheet" href="style.css"></head>
<style>
span {font-size: 50px;}
</style>
<body>
<span class="icon-icon-poo"></span>
<span class="mls"> icon-icon-poo</span><br>
<span class="icon-icon-dog"></span>
<span class="mls"> icon-icon-dog</span><br>
<span class="icon-icon-oxxo"></span>
<span class="mls"> icon-icon-oxxo</span>
</body>
</html>
使用 Fontello 自制 Icon Font
打开 Fontello 工具，把自己制作的 SVG Icon 拖拉到“Drag custom SVG icons”的区域，就能上传自己的 SVG Icon。
- 前往 Fontello：https://fontello.com/
- 范例文件：icon-oxxo.svg、icon-dog.svg、icon-poo.svg
上传完成后点击“Download webfont”按钮就可以下载文件，也可以点击上方“设定图示”进行细部设定，例如 baseline 的位置等等。
完成后使用 style.css，就能出现自己制作的 Icon Font。
<html>
<head>
<meta charset="utf-8">
<title>OXXO 自製 Icon Font</title>
<link rel="stylesheet" href="style.css"></head>
<style>
span {font-size: 50px;}
</style>
<body>
<span class="icon-icon-poo"></span>
<span class="mls"> icon-icon-poo</span><br>
<span class="icon-icon-dog"></span>
<span class="mls"> icon-icon-dog</span><br>
<span class="icon-icon-oxxo"></span>
<span class="mls"> icon-icon-oxxo</span>
</body>
</html>
小结
自制 Icon Font 可以替网页增添许多个人化的风格，也可避免按钮图示跟别人长得相同，更可以发挥设计师设计 Icon 的专长，如果有设计专长的工程师，不妨试试看自己设计 Icon Font。
微信扫码关注
抖音扫码关注