iconfont采坑
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
转载于:https://www.cnblogs.com/sky-chen/p/11069038.html
iconfont采坑相关推荐
- iOS 微信SDK1.8.6后需要UniversalLink解决方案及采坑记录
项目最初因审核原因,一直使用iOS原生分享, 最近因项目需求要求, 接入微信分享, 以为和原来的没有区别, 但是接入时才发现改动的地方还是挺多的, 主要是需要配置UniversalLink和提包时的一 ...
- H5拍照、预览、压缩、上传采坑记录
H5拍照.预览.压缩.上传采坑记录 公司项目前段时间需要实现手机拍照上传的功能,本来以为用createObjectURL和canvas可以很轻松的实现,结果发现问题多多,特此记录下来. DEMO预览( ...
- 【TP3.2】模板 select选项采坑
1.TP3.2 模板 select 下拉框采坑 <div class="form-item"><label class="item-label" ...
- MySQL单表数据量过千万,采坑优化记录,完美解决方案
MySQL单表数据量过千万,采坑优化记录,完美解决方案 参考文章: (1)MySQL单表数据量过千万,采坑优化记录,完美解决方案 (2)https://www.cnblogs.com/ExMan/p/ ...
- VS2015+MySql+EF6采坑经验总结
原文:VS2015+MySql+EF6采坑经验总结 背景:VS2015+MySql+EF6(DB First) 采坑顺序:按照以前的记忆,操作依次如下: 1,安装 MySQL Connector/NE ...
- mysql8.0.19.0_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...
- bootstrap-select采坑
bootstrap-select采坑 1.class="selectpicker" 普通的下拉框功能 2.title="请选择城市名称" title的作用与pa ...
- Taro小程序采坑记
Taro,京东凹凸实验室出品的适配多端的一个框架, Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端 ...
- mysql8.0依赖_分享MySql8.0.19 安装采坑记录
上篇文章给大家介绍了MySql8.0.19 安装过程,需要的朋友可以点击查看.https://www.jb51.net/article/178988.htm 1.ERROR 1820 (HY000): ...
- 安装docker和jupyter采坑历程
背景:发现自己电脑配置不够,在进行模型参数调优时基本进行不下去了.计划使用云服务器,由于自己只是用来跑模型.所以按需计费最为合适.考虑到每次使用都需要部署开发环境,索性用docker实现.这样每次部署 ...
最新文章
- 动态规划和分治法,贪心算法以及递归的再一次深刻理解和体会
- java课程 数独 文库_数独java
- 代码之谜(二)- 语句与表达式
- 制作U盘启动LINUX安装(Ubuntu12.04)
- 十种排序算法的java汇总
- 计算机一般的应用课题方向,计算机类哪个方向的课题好立项
- 遇见未来 | 软件定义数据中心:人类文明运行在软件之上
- 数据库的四个范式之间的区别
- 子弹短信回应 App 下架;摩拜起诉滴滴;VS Code 1.28 发布 | 极客头条
- 求$N^N$的首位数字
- Android_Bitmap_图片的二次采样并生成缩略图
- 南京大学杨杨计算机,国际交流,研途有术 | 博士生国际学术交流经验分享会(四)...
- 优雅的实现Activiti动态调整流程(自由跳转、前进、后退、分裂、前加签、后加签等),含范例代码!...
- %3c大自然的语言%3e竺可桢题目,大自然的语言竺可桢阅读答案
- 百度地图、高德地图的数据从哪里得到的?
- 计算机制作贺卡教案,三八爱心节贺卡教案
- nyoj366 D的小L 全排列模板题
- b站视频详情数据抓取,自动打包并发送到指定邮箱(单个或者群发)
- 程序员如何用“心“表白(结尾附源码)
- BLAM的安装与使用