如何巧妙的将小图片转化成字体图标(二)

回顾一中我们使用的是iconfont.cn来实现图片及字体转换,但是有的时候,如果我们遇到了一个非常热情的UI设计师怎么办呢。温柔善良的UI设计师不需要我们自己去切小图标,已经帮我们把图标全部切好了,我们不能驳了别人的一番美意吧,所以这个时候,icomoon.in就出现了。此方法有一定的缺陷,只能将svg格式的小图标转化成字体文件,我们如果用网上的方法将png转化成svg在来icomoon中使用也是不行的,必须是设计师通过AI制作的额SVG图片。

1、输入网址后,进入icoMoon App

14110538-e343a5ecd08d1064.png
进入icoMoon App

2、新建项目

14110538-aa9313c71fec129b.png
新建项目

3、修改项目名字

14110538-9cb8390769b5c755.png
修改名字

4、上传SVG图片

14110538-fe89300865f2ad03.png
上传SVG图片

5、选中并生成字体文件

14110538-7e0a5b5907d3c5d2.png
生成字体文件

6、下载并保存这些字体文件


14110538-e7eac446d5ac8bc4.png
下载保存

7 、解压得到以下文件,选择style.css文件和fonts文件夹拷贝至项目中

14110538-d0b9d59c0be55972.png
解压

8、剩下的和上一篇的方法一样,在main.js中全局引用style.css,然后就可以在项目中使用这些字体文件了。

相比这种来说,其实如何巧妙的将小图片转化成字体图标(一)在开发中用起来应该更顺手,在这里也推荐大家使用一更多一点,但是这种也可以了解。

猜你喜欢

转载自blog.csdn.net/weixin_33676492/article/details/91036414