web前端开发个人技术博客
当前位置: 前端技术 > 如何将SVG文件转换成图标字体文件

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

2018-12-17 分类:前端技术 作者:码云 阅读(154)

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

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(4) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
4

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - 如何将SVG文件转换成图标字体文件

  1. 快乐的菜鸟 Linux Chrome 62.0.3202.84

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

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @快乐的菜鸟嗯嗯,还有很多实用方法,后期我会持续更新的。

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论