使用icomoon生成字体图标
小伙伴们应该或多或少的都使用过字体图标吧,由于最近项目里面大量使用各种按钮图标,因为时间的原因,一开始没有好好设计直接就拿图片网上怼,后来图片越来越多,页面压力山大啊,而且对加载速度影响很大,后来想用 css Sprites,但是每添加一个按钮就要重新设计图标和背景图,直接放弃了,最后锁定为字体图标,又在Font Awesome和icomoon两者间纠结,最终拍板icomoon.
字体图标(icon font)优/缺点
说到为什么最终选择使用字体图标而不是用图片和css Sprites,在这里说明一下字体图标的优点:
- 分辨率:因为字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率和PPI下面,都可以做到完美缩放,不会像传统位图,如：png，jpeg,放大后有锯齿或模糊现象;
- 文件小:相比图片几十几百KB的容量,icon fonts 几乎是羽翼级轻量;
- 加载性能好:因为图标都被打包进一套字体内,http request 减少.这如同我们常用的 css sprites 技术;
- 支持CSS样式:和普通字体一样,你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…;
- 兼容性好:web fonts 起源很早,别说主流浏览器,连IE6/7都能良好支持.除了一些老的移动端浏览器,如Android 2.1以下的初代浏览器,Opera mini 这类自限型浏览器
当然,人无完人,金无足赤,icon fonts 也有它的不足:
- 样式单一,无法针对不同分辨率来调整icon 的细节,比如降低大尺寸icon 的线条粗细,你只能选择别的ico;
- 有少量的移动设备有可能会和 icon fonts 的字符编码冲突,导致icon 显示不正常
但是在我看来,在适宜场景下,icon fonts 是一个令设计师和前端工程师都心花怒放的方案.
icomoon使用详解
废话说的够多了,下面就详细说一下,icomoon这个东西怎么用.现奉上地址:https://icomoon.io/app/#/select.
1.打开网址进入到主页面,如下:
2.新建一个项目:
3.当然你也可以直接导入一个svg图片,下面是我的svg导入的:
4.这是对图标进行操作的:
5.选中相中的图标,也可以点击左边的菜单进行全选:
6.选中图标之后,点击右下角的generate font 进行下载:
7.进入下载页面,可以点击preferences进行图标设置,font name可以写项目的名称之类的,然后点击右下角的download进行字体文件的下载:
8.解压下载下来的包,如下:
最后我们将下载下来的整个文件夹放入到项目中,在页面中引用style.css即可.
icomoon字体图标就这样引入到你的项目中使用了,图标完全可以当成字体来使用,你可以用css来控制它的样式、大小、颜色、阴影、hover状态、透明度、渐变等等…
至此.小伙伴就可以在项目中使用icomoon了,如果还是嫌麻烦的话,可以直接下载小弟已经下载好了的字体文件,如果有其他需要的字体图标文件没有的话,欢迎留言,小弟看到以后会更新文件的,以下就是下载链接:https://download.csdn.net/download/qq_37261367/10361503
结束!
本文纯手打，有不当之处请留言！希望能帮到小伙伴们，谢谢！