使用IcoMoon制作字体图标

在写网页的时候,会用到很多图标,很多时候会选择用图片来展示,这里介绍一个网站可以将图片转化为Icon图标。Icon图标的外观跟图片相比效果一样,但是Icon图标加载更快,更加灵活,更节省资源,也不失为一种前端性能优化的方法。

一、具体方法

网站地址:https://icomoon.io/

 

官网
官网

 

1.1 准备SVG格式的图片几张
1.2 点击IcoMoon App 按钮

 

IcoMoon App
IcoMoon App

 

1.3 导入准备的图标文件,

 

 Import Icons
Import Icons

 

1.4 选中图标,也可以选中网站内的免费图标,生成字体

 

generate fonts
generate fonts

 

1.5 属性调整,修改Icon名称,点击preferences修改class类名前缀,浏览器兼容性之类的,一般使用默认的

 

修改名称
修改名称

 

 

修改preferences
修改preferences

 

1.6 点击download下载,之后解压缩,将fonts文件和style.css文件复制到你的工程文件中,若fonts文件和style.css的路径有改变,style.css文件内的url也要相应的改变

 

demo
demo

 

 

使用方式
使用方式

 

 

enter description here
修改颜色

 

修改大小就就直接设置font-size即可

posted @ 2019-02-28 10:32  MandyCheng  阅读(376)  评论(0编辑  收藏  举报