码迷,mamicode.com
首页 > 其他好文 > 详细

自制字体图标

时间:2017-12-25 19:32:11      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:空白   http   color   com   https   矢量图   文档   文件   页面   

使用字体图标的优点:

1.比图标更清晰

2.把图片当做字体,减少对服务器的请求,性能优化

3.可以解决原先底部点击小图片出现空白的bug

做法也比较简单:(直接在阿里字体图标库选择的图标可能会出现图标线条粗细不一致,UI要求比较高的话建议让UI把小图标做成矢量图,然后前端转换一下成字体图标,这样就完美了)

1.UI需要制作矢量小图标(svg格式,需要注意一下,UI最好转曲一下,防止被修改。曾经图标中没有转曲会出现线条自动变粗、利用生成工具生成空白图片等bug,是转曲之后解决了bug。所以要记得转曲一下,防止被修改);

2.拿到矢量小图标之后,前端利用字体图标生成工具生成字体图标     工具网址:https://icomoon.io/app/#/select

3.下载资源(需要把除了demo、html、文档外的文件引入页面)

4.页面的使用:引用style.css、添加相关类名、标签中间的写法在原生成工具那里可以查看到

5.自定义字体图标的样式:这里当做字体处理就可以了,更换颜色直接设置color就好,定义大小直接用font-size就可以了。

简单的叙述,大家一起进步。

自制字体图标

标签:空白   http   color   com   https   矢量图   文档   文件   页面   

原文地址:https://www.cnblogs.com/wanan-01/p/8110457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!