最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

前端开发项目中经常会和图片文件打交道,在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包供我们下载,然后下载下来,这样我们的新生成的图标字体文件就做好了,放到我们的项目中使用了,是不是很简单呢。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何将SVG文件转换成图标字体文件

2 评论

  1. 不错,很实用,收藏了,博主

    1. 嗯嗯,还有很多实用方法,后期我会持续更新的。

发表评论