码云笔记前端博客
Home > JavaScript > 如何将SVG文件转换成图标字体文件

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

2018-12-17 分类:JavaScript 作者:管理员 阅读(421)

本文共计890个字,阅读时间预计3分钟,干货满满,记得点赞加收藏哦

前端开发项目中经常会和图片文件打交道,在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前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8647922 次
  • 最近更新: 2019年11月21日