如何灵活利用免费开源图标字体-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 目录直接拷贝到项目中去，就可以直接使用图标字体了