书读的越多而不加思考,你就会觉得你知道得很多;而当你读书而思考得越多的时候,你就会越清楚地看到,你知道得很少。——伏尔泰

如何将SVG文件转换成图标字体文件

产品设计 码云 123℃ 0评论

前端开发项目中经常会和图片文件打交道,在UI设计师设计好的图片后,我们需要做到适合项目使用的图片,特别是SVG图片文件不可能直接用到我们项目中,就需要我们借助工具将SVG转换成图标字体文件,那么,如何将SVG文件转换成图标字体文件呢?今天博主就手把手教大家如何制作图标字体,希望对大家有用,还是那句话,大佬绕道,需要的拿走不谢。

在制作图标字体文件时,博主推荐大家一个在线网页转换工具,打开IcoMoon官网icomoon.io,如下图是它的主页:

IcoMoon官网

首先点击IcoMoon App按钮,

IcoMoon App按钮

我们会看到这里有很多IcoMoon推荐的字体图标,但是呢,我们不但算使用它,我们要自定义我们自己的图标。我们需要导入我们的SVG图片,点击左上角的Import Icons按钮进行选择所有的SVG文件,如下图:

Import Icons按钮进行选择所有的SVG文件

选择所有的SVG文件后,我们就可以把它上传到IcoMoon网站中,然后我们点击选中我们上传上的小图标,点击右下角的Generate Font按钮来生成图标字体,如下图:

生成图标

点击Generate Font按钮进入到以下页面中,大家鼠标滑过每一个生成的块会看一个Get Code按钮,如下:

Get Code按钮进行代码生成

 

点击Get Code按钮后会弹出一个框里面是生成图标字体按钮的代码,这是告诉我们如何使用图标字体,在HTML中我们定义一个span标签,class名为icon-thumb_up,然后这个icon-thumb_up的before伪类加上一个content这样就可以使用它了,是不是非常简单呢。如下图:

生成图标字体按钮的代码

当然上面代码步骤只是告诉大家如何使用,接着我们关掉弹框,将这些图标字体下载下来,在下载之前呢我们可以点击Preferences按钮,弹出一个框,对我们新生成的图标字体进行设置,我们这里只做对新生成的字体文件命名,其它选项感兴趣的同学下去可以根据需要进行设置,包括字体开头、浏览器支持情况等等。

对图标字体进行相关设置项

设置好之后,我们关掉弹框就可以点击右下角Download按钮进行下载了,大家可以看到,IcoMoon工具自动压缩成zip包供我们下载,然后下载下来,这样我们的新生成的图标字体文件就做好了,放到我们的项目中使用了,是不是很简单呢。

转载请注明:码云笔记 » 如何将SVG文件转换成图标字体文件

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 不错,很实用,收藏了,博主
    快乐的菜鸟2018-12-27 10:38 回复
    • 嗯嗯,还有很多实用方法,后期我会持续更新的。
      码云2018-12-27 10:39 回复