- 这里使用的是 icoMoon 的工具进行制作的
- 首先点击页面右上角的 【Import Icons】 按钮，之后找到项目中的 svg 文件路径，选中 svg 文件（这里也是可以多选的噢~），之后再点击【打开】即可
image.png
- 之后会在当前页面生成一个我们上传的 svg 文件的列表，需要点击该 icon 其背景颜色变为白色即表示成功，之后再点击右下角的 【Generate Font 】按钮
image.png
- 之后就成功生成想要的字体文件了，将鼠标放到每一个文件上面会出现 【Get Code 】的按钮
image.png
- 点击【Get Code】按钮就可以看到具体的使用方法
image.png
由于我这个 icon 较为复杂，所以不太使用这种转字体的方法，简洁一点的 svg 文件较为合适，上面只是演示了其用法
- 之后可以点击右上角的 【Preferences】按钮对生成的字体文件目录进行自定义的设置
image.png
目录名称
类名前缀
下面的浏览器支持情况
以及下面的其他的选项
除了目录名称其他的使用默认的即可
- 最后将上面修改目录名称的弹窗关闭，再点击右下角的【Download】按钮，便会自动的将所有的 svg 文件生成一个
xiaochuan-icon目录的压缩文件，并全部下载下来
image.png
- 之后将压缩包解压，下图是解压后的目录下的所有文件
image.png
fonts 就是所有的图标字体文件
- 使用方法：将 style.css 文件中的
css 样式以及 fonts 目录直接拷贝到项目中去，就可以直接使用图标字体了
