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