老梁
iconfont采坑
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
老梁
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
iconfont采坑
iconfont采坑
老梁
关注
发布于 2019-09-10 18:54:13
850
0
发布于 2019-09-10 18:54:13
举报
文章被收录于专栏:
Java工程师成长之路
Java工程师成长之路
1. iconfont采坑
1.1. 前言
使用iconfont过程中踩过坑特此记录
不知道iconfont的这里也简单介绍一笔,阿里开放的一个图标素材库,用来快速找图标下载使用图标
iconfont网址
1.2. 所谓单色
iconfont中有些图标,看着是单色的,也就是整体单色,中间有些白,但是
白色和无色还是有区别
的啊,当我拿了一个蓝白相间的图标过去赋值个颜色,这个图片就整个一块同色区,所以选图标的时候要看仔细了,编辑下是否中间是白色的
1.3. iconfont的三种使用模式
1.3.1. unicode
最原始的使用方式,也是最通用的,支持范围最广,但只支持单色
1.3.2. font class
兼容性较好,语义明确,书写更简单,但其也只支持单色的,它和unicode的区别很大程度就是写法不一样点,更多时候就用font class
1.3.3. symbol
全新的一种方式,介绍说是未来趋势,毕竟它支持多色图标,但是它的兼容性较差,这也是比较容易遇到的坑点
1.3.4. 我遇到的相关坑
前两种方式引入的图片哪怕找来是彩色的引入
默认会是黑白色的
,所以你找的图标如果本身是彩色的或是除黑白以外的其它单色,那要小心了,可能就会遇到里面轮廓是填充色,那么一旦你给它的颜色,那就是一坨xx在那里了;
解决办法最简单的就是,如果你要放的图片
本身就是单色的
,那就去图标库找黑白图标,那种图标本身设计就会是镂空的,给个颜色后就像写字一样一笔一划颜色就出来了
如果你
本身要找彩色的
图标,那么我是不建议用symbol的,或许以后成熟的可以用,但现在你用了这个,在浏览器里看可能是没问题的,但如果是写小程序,写app啥的,那就说不定了。我就在写小程序的时候试了symbol,报错不能进行下去了,还是回滚变成了引入图片
1.4. 总结
总的来说,我的总结就是遇到需要单色图标的时候用font class,复杂颜色的图标只能控制大小直接引入图片了,当然你也可以试试在你编写的环境能不能用symbol,踩踩坑小ks
本文参与
腾讯云自媒体分享计划
,分享自作者个人站点/博客。
原始发表:2019-06-22 ,如有侵权请联系
cloudcommunity@tencent.com
删除
前往查看
小程序
微信
本文分享自
作者个人站点/博客
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
本文参与
腾讯云自媒体分享计划
,欢迎热爱写作的你一起参与!
小程序
微信
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
关注
文章
0
获赞
0
目录
1. iconfont采坑
1.1. 前言
1.2. 所谓单色
1.3. iconfont的三种使用模式
1.3.1. unicode
1.3.2. font class
1.3.3. symbol
1.3.4. 我遇到的相关坑
1.4. 总结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
免费体验
产品介绍
产品文档
精选特惠 用云无忧
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐