1. iconfont采坑

1.1. 前言

  1. 使用iconfont过程中踩过坑特此记录
  2. 不知道iconfont的这里也简单介绍一笔,阿里开放的一个图标素材库,用来快速找图标下载使用图标
  3. iconfont网址

1.2. 所谓单色

  1. iconfont中有些图标,看着是单色的,也就是整体单色,中间有些白,但是白色和无色还是有区别的啊,当我拿了一个蓝白相间的图标过去赋值个颜色,这个图片就整个一块同色区,所以选图标的时候要看仔细了,编辑下是否中间是白色的

1.3. iconfont的三种使用模式

1.3.1. unicode

  1. 最原始的使用方式,也是最通用的,支持范围最广,但只支持单色

1.3.2. font class

  1. 兼容性较好,语义明确,书写更简单,但其也只支持单色的,它和unicode的区别很大程度就是写法不一样点,更多时候就用font class

1.3.3. symbol

  1. 全新的一种方式,介绍说是未来趋势,毕竟它支持多色图标,但是它的兼容性较差,这也是比较容易遇到的坑点

1.3.4. 我遇到的相关坑

  1. 前两种方式引入的图片哪怕找来是彩色的引入默认会是黑白色的,所以你找的图标如果本身是彩色的或是除黑白以外的其它单色,那要小心了,可能就会遇到里面轮廓是填充色,那么一旦你给它的颜色,那就是一坨xx在那里了;
  2. 解决办法最简单的就是,如果你要放的图片本身就是单色的,那就去图标库找黑白图标,那种图标本身设计就会是镂空的,给个颜色后就像写字一样一笔一划颜色就出来了
  3. 如果你本身要找彩色的图标,那么我是不建议用symbol的,或许以后成熟的可以用,但现在你用了这个,在浏览器里看可能是没问题的,但如果是写小程序,写app啥的,那就说不定了。我就在写小程序的时候试了symbol,报错不能进行下去了,还是回滚变成了引入图片

1.4. 总结

  1. 总的来说,我的总结就是遇到需要单色图标的时候用font class,复杂颜色的图标只能控制大小直接引入图片了,当然你也可以试试在你编写的环境能不能用symbol,踩踩坑小ks

iconfont采坑的更多相关文章

  1. Antd前端开发采坑记录

    背景 基于页面友好,界面整洁美观:基于Antd框架开发虾能平台 选型 基于Antd-admin工程架构,进行开发:基于Antd+React+Umj 采坑记录 按照Html方式天机onClick方法,每 ...

  2. uniapp之w-picker使用采坑

    1. uniapp之w-picker使用采坑 1.1. 前言 由于我是先在index页面集合了这个组件,发现该文件内容实在太多了,不好维护,所以打算把内容一个个抽成组件,在抽w-picker时,遇到了 ...

  3. Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记

    公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...

  4. angular采坑记录

    在angular中会遇到一些莫名的问题,导致不能完成想要的功能,可能是某项用法使用错误,或许是angular相对应不支持,或者是我们功力根本就没有达到.为了在每次采坑之后能有所收获,再遇到时能理解其根 ...

  5. 分布式改造剧集之Redis缓存采坑记

    Redis缓存采坑记 ​ 前言 ​ 这个其实应该属于分布式改造剧集中的一集(第一集见前面博客:http://www.cnblogs.com/Kidezyq/p/8748961.html),本来按照顺序 ...

  6. 采坑:python base64

    需求:  读取文本内容,对字符串进行base64加密 >>> str = 'aaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbbbbbbbbbb\nccc ...

  7. Hadoop环境搭建--Docker完全分布式部署Hadoop环境(菜鸟采坑吐血整理)

    系统:Centos 7,内核版本3.10 本文介绍如何从0利用Docker搭建Hadoop环境,制作的镜像文件已经分享,也可以直接使用制作好的镜像文件. 一.宿主机准备工作 0.宿主机(Centos7 ...

  8. Spring Cloud Config采坑记

    1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...

  9. rabbitmq在ios中实战采坑

    1. rabbitmq在ios中实战采坑 1.1. 问题 ios使用rabbitmq连接,没过多久就断开,并报错.且用android做相同的步骤并不会报错,错误如下 Received connecti ...

随机推荐

  1. Linux 内存文件系统-ramfs and tmpfs

    Linux内存文件系统:可满足高IO的要求 ramdisk: 基于虚拟在内存中的其他文件系统(ex2fs). 挂载方式:mount /dev/ram /mnt/ramdisk ramfs: 物理内存文 ...

  2. Java实现MapReduce Wordcount案例

    先改pom.xml: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  3. 在python的虚拟环境venv中使用gunicorn

    昨天遇到的问题,一个服务器上有好几个虚拟机环境. 我active进一个虚拟环境,安装了新的三方库之后, 使用gunicorn启动django服务, 但还是死活提示没有安装这个三方库. 一开始没有找到原 ...

  4. nginx代理ambassador出现426错误

    现在ambassador文档啃得差不多了.进入实战阶段. 一开始,就偶遇426错误. 网络结构大致如下: 浏览器访问nginx, nginx代理到k8s内的ambassador, ambassador ...

  5. luoguP1972 [SDOI2009]HH的项链

    经典颜色问题推荐博文 https://www.cnblogs.com/tyner/p/11519506.html https://www.cnblogs.com/tyner/p/11616770.ht ...

  6. 【西北师大-2108Java】第三次作业成绩汇总

    [西北师大-2108Java]第三次作业成绩汇总 熟悉PTA平台线上测试环境: 理解用户自定义类的定义: 掌握对象的声明: 学会使用构造函数初始化对象: 使用类属性与方法的使用掌握使用: 掌握pack ...

  7. LeetCode 分治算法

    分治算法:是将问题划分为一些独立的子问题,递归的求解个子问题,然后合并子问题的解而得到原问题的解. 分治算法步骤 step1 分解:将原问题分解为若干个规模较小,相互独立,与原问题形式相同的子问题: ...

  8. arXiv网站

    arXiv 原先是由物理学家保罗·金斯巴格在1991年建立的网站, 我们会将预稿上传到arvix作为预收录,因此这就是个可以证明论文原创性(上传时间戳)的文档收录网站.

  9. Leetcode4__findMedianSortedArrays

    findMedianSortedArrays 基本思路:通过指针按顺序移动来判断大小顺序,思路和有一道用链表求中间值一样: class Solution { public double findMed ...

  10. 安装oracle 11g及初次链接使用, 解锁及常用命令

    1. 安装方法参考原创: https://blog.csdn.net/projectNo/article/details/76533921 2.初次链接数据库时,注意以下: 1. window + r ...