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
iconfont采坑的更多相关文章
- Antd前端开发采坑记录
背景 基于页面友好,界面整洁美观:基于Antd框架开发虾能平台 选型 基于Antd-admin工程架构,进行开发:基于Antd+React+Umj 采坑记录 按照Html方式天机onClick方法,每 ...
- uniapp之w-picker使用采坑
1. uniapp之w-picker使用采坑 1.1. 前言 由于我是先在index页面集合了这个组件,发现该文件内容实在太多了,不好维护,所以打算把内容一个个抽成组件,在抽w-picker时,遇到了 ...
- Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记
公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...
- angular采坑记录
在angular中会遇到一些莫名的问题,导致不能完成想要的功能,可能是某项用法使用错误,或许是angular相对应不支持,或者是我们功力根本就没有达到.为了在每次采坑之后能有所收获,再遇到时能理解其根 ...
- 分布式改造剧集之Redis缓存采坑记
Redis缓存采坑记 前言 这个其实应该属于分布式改造剧集中的一集(第一集见前面博客:http://www.cnblogs.com/Kidezyq/p/8748961.html),本来按照顺序 ...
- 采坑:python base64
需求: 读取文本内容,对字符串进行base64加密 >>> str = 'aaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbbbbbbbbbb\nccc ...
- Hadoop环境搭建--Docker完全分布式部署Hadoop环境(菜鸟采坑吐血整理)
系统:Centos 7,内核版本3.10 本文介绍如何从0利用Docker搭建Hadoop环境,制作的镜像文件已经分享,也可以直接使用制作好的镜像文件. 一.宿主机准备工作 0.宿主机(Centos7 ...
- Spring Cloud Config采坑记
1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...
- rabbitmq在ios中实战采坑
1. rabbitmq在ios中实战采坑 1.1. 问题 ios使用rabbitmq连接,没过多久就断开,并报错.且用android做相同的步骤并不会报错,错误如下 Received connecti ...
随机推荐
- Xcode 7.3 解决自定义类无法自动联想
正在苦拼的码友们,最近是不是觉得在写代码的时候很是头疼,甚至连个最基本的系统自带的语法啊.单词啊等等都不能联想了,之前习惯了的码友们,这个时候肯定会觉得是不是自己写错了,然后也往下翻了一大篇,还是找不 ...
- Quest 公司的Shareplex 与 GoldenGate比较
Quest 公司的Shareplex 与 GoldenGate比较 2012-08-01 16:51:12 —————————————————————————————————————————— ...
- mssql sqlserver 使用sql脚本实现相邻两条数据相减的方法分享
摘要: 下文讲述使用sql脚本实现相邻两条数据相减的方法,如下所示: 实验环境:sql server 2008 R2 实现思路: 1.使用cte表达式,对当前表进行重新编号 2.使用左连接对 表达式 ...
- Windows文件夹共享和Unity的PersisterdataPath
在共享机上存放unity开发的pc版本游戏,在其它机器双击就可以运行,但会遇到问题,比如: 游戏是需要下载资源的,默认情况下unity下载的资源是存放在persisterdataPath目录的,对于w ...
- 201871010132-张潇潇-《面向对象程序设计(java)》第八周总结
201871010132-张潇潇<面向对象程序设计(java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- 【2019.8.9 慈溪模拟赛 T1】数论(a)(打表找规律)
莫比乌斯反演 血亏! 比赛时看到这题先写了个莫比乌斯反演,然后手造了几组数据和暴力对拍的时候发现,居然答案就是\(nm\)... 吐槽数据范围太小... 下面给上出题人对此题的解释: 原式的物理意义, ...
- ES6-Symbol.iterator 迭代器
一个数据结构只要部署了Symbol.iterator属性就能使用 for...of遍历 与 ...运算符 操作 Object身上没有Symbol.iterator,当直接使用时会报错 let obj ...
- UOS系统 - 国产统一操作系统UOS的基本知识
一.UOS操作系统含义及现状 UOS操作系统与windows不同的是,UOS统一操作系统支持龙芯.申威.华为鲲鹏等一票国产处理器芯片.它的诞生是多家国内科技公司联合孕育的结果,包括中国电子集团.武汉深 ...
- ActiveMQ基础使用
概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...
- NETCore下IConfiguration和IOptions的用法(转载)
原文:https://www.jianshu.com/p/b9416867e6e6 新建一个NETCore Web API项目,在Startup.cs里就会开始使用IConfiguration和IOp ...