使用IcoMoon制作字体图标
在写网页的时候,会用到很多图标,很多时候会选择用图片来展示,这里介绍一个网站可以将图片转化为Icon图标。Icon图标的外观跟图片相比效果一样,但是Icon图标加载更快,更加灵活,更节省资源,也不失为一种前端性能优化的方法。
一、具体方法
网站地址:https://icomoon.io/
![官网 官网](./images/Snipaste_2019-02-27_13-52-47.png)
官网
1.1 准备SVG格式的图片几张
1.2 点击IcoMoon App 按钮
![IcoMoon App IcoMoon App](./images/Snipaste_2019-02-27_13-57-29.png)
IcoMoon App
1.3 导入准备的图标文件,
![Import Icons Import Icons](./images/Snipaste_2019-02-27_14-02-24.png)
Import Icons
1.4 选中图标,也可以选中网站内的免费图标,生成字体
![generate fonts generate fonts](./images/Snipaste_2019-02-27_14-04-27.png)
generate fonts
1.5 属性调整,修改Icon名称,点击preferences修改class类名前缀,浏览器兼容性之类的,一般使用默认的
![修改名称 修改名称](./images/Snipaste_2019-02-27_14-08-26.png)
修改名称
![修改preferences 修改preferences](./images/Snipaste_2019-02-27_14-09-04_2.png)
修改preferences
1.6 点击download下载,之后解压缩,将fonts文件和style.css文件复制到你的工程文件中,若fonts文件和style.css的路径有改变,style.css文件内的url也要相应的改变
![demo demo](./images/Snipaste_2019-02-27_14-16-52_1.png)
demo
![使用方式 使用方式](./images/Snipaste_2019-02-27_14-34-14_1.png)
使用方式
![enter description here enter description here](./images/Snipaste_2019-02-27_14-34-48_3.png)
修改颜色
修改大小就就直接设置font-size即可