使用 icomoon 在线制作图标(svg)字体文件

如何灵活利用免费开源图标字体-IcoMoon篇 « 张鑫旭-鑫空间-鑫生活

1. 这里使用的是 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 目录直接拷贝到项目中去，就可以直接使用图标字体了