样式小图标的三种处理方式

搜狗：tubiao/icon

小图标的处理方法有三种：

一，最直接就是切图放在文件中进行读取
缺点：
1，屡次HTTP请求，影响性能
2，不方便修改和维护。（每次修改都要从新修改美工修改图片大小，颜色等等）

二，使用base64，把图片转换为base64代码
本质：把小图标经过Base64转换成 Base64格式的图片 或者是 二进制编码
1，打开网址：https://www.sojson.com/image2base64.html
2，点击选择文件---选择须要转换的图片---肯定---等待转换完毕
3，通过Base64 编码后的文件体积通常比源文件大 30% 左右
4，浏览器通常都有限制最大值，Opera9~11 限制为 64K，IE8 限制为 32KB

优势：
1，减小HTTP请求

缺点：
1，不兼容IE 6 / IE 7
2，编码后比原图大 30% 左右
3，手动修改，更麻烦
4，二进制编码是不能做为对象单独缓存的，除非缓存整个页面。

三，经过CSS画一个小图标(通常都是比较简单的图标)
使用该种方法通常要提早和美工商量好的。
小图标可使用<i></i>标签：
CSS代码画三角形以下：

向上的三角形：
.triangle {
margin-left: 8px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: none;//不设置，在控制台空看出，图标的高度莫名的占据了12px,计算了透明的上边框。
border-bottom: 6px solid blue;
}

向下的三角形：
.triangle {
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom: none;//必须设置，不然向下图标会跑动。
border-top-color: red;
}

优势：
1，减小HTTP请求
2，兼容性好
3，简单不麻烦，性能好
4，跟原图不会如出一辙，许提早跟设计或者交互提早沟通。

缺点：
1，不兼容IE6及如下浏览器

四，使用图标字体
本质：就是字体，只是长了一个图像的脸，说白了就是特殊符号。
怎么修改字体就怎么修改图标字体。

优势：
1，矢量图，不失真
2，减小HTTP请求
3，兼容性好
4，简单操做，怎么操做字体，就怎么操做图片字体(如颜色，大小等)

缺点：
1，基本做用于小图标
2，有时没法百分百还原设计稿(由于图标大小没法和设计稿如出一辙)
建议在设计以前就和设计或者交互沟通好。

获取图标字体的网站有两个：
1，国外网站：https://icomoon.io/ 通常要付费的,速度比较慢，使用英文搜索
2，阿里巴巴矢量图标库：https://www.iconfont.cn/home/index 响应速度相对快，且免费的。使用中文搜索

解析下阿里巴巴矢量图标库的使用方法：
1，打开网站： https://www.iconfont.cn/home/index

2，使用中文搜索，输入须要的图标如：搜索，购物车，箭头等等。
鼠标点击图标中购物车图标，先加到购物车中，等等一块儿下载。

3，把全部须要的图标字体添加到购物车中，点击下载代码，所有下载---右键解压出来。

4，在项目中建立一个文件夹名字叫font , 和 css 平级，把文件如下5个文件复制到font中：
iconfont.eot iconfont.svg iconfont.ttf iconfont.woff iconfont.woff2
这 5 个文件是用于兼容其余浏览器，由于不一样的浏览器支持的格式不一样。

5，同时使用编辑器打开文件 iconfont.css 复制里面的全部内容，把它放到一个css文件中，而且引用该样式。

6，修改 @font-face 中的 引用如下5个文件：iconfont.eot/iconfont.woff/iconfont.svg/iconfont.ttf/iconfont.woff2 的全部 url 的相对地址。
这里面的全部 url 都是引用文件夹 font 里面的字体，注意相对路径的书写，千万别写错了。
其中有一个 url('data:application...') 这里千万别进行修改，不然直接报错。

7，把 @font-face 中的 类名 .iconfont 和 .icon-jiantoushang(就是须要显示的图标字体的类名) 放到须要显示的标签的类里面便可正常显示。
好比须要在标签 i 显示 下拉箭头，有两种方式，以下：

第一种：
<i class="iconfont icon-jiantoushang"></i> 这样便可正常显示 向上的箭头。

第二种：
<i class="iconfont ">&#xe695;</i> 这样便可正常显示 向上的箭头。
注意编码： &#xe695; 是从 demo_index.html中得到的，
打开demo_index.html帮助文档 能够看到每一个图标字体下面都有相应的unicode编码，
不一样的是，以上编码是 使用 &#x 代替了 unicode 编码的 斜杆

若是使用了unicode的编码，那么就不须要 icon-jiantoushang 这些图标字体类了，能够删了，只留一个对象@font-face 一个类.iconfont
后面具体的图标字体类就不须要了。

难点：
如：这里使用的是下拉列表向下的图标字体
.dropdown-arrow {
/* i 标签有时要设置为行内块级元素才能够进行旋转，transform:rotate(180deg);*/
display: inline-block;

/* 设置全部字体的高度不继承父元素的行高*/
line-height: 1;
/* background-repeat: no-repeat; */
}

搜狗：css    CSS原生变量 :root{ --columns: 5; }yangshiyouxianji   (样式优先级)link   链入外部样式xuanzeqi    (jQuery选择器)mingmingguifan    (命名规范)textalign    元素内文本水平对齐方式vertical     多种方案：对文本元素上下左右垂直居中font         设置复合文字字体overflow/yichu   对文本溢出是否换行的操做wenbenyangshi  单词和字母的间距，文本修饰和文本缩进word-spacing、letter-spacing、text-decoration、text-indentjuzhong/chuizhijuzhong    上下左右垂直居中liebiao/list   设置有无列表的样式，及列表一些属性position      相对、绝对，固定，磁贴定位buju/shengbeibuju/shuangfeiyibuju       经典布局(行/列布局，混合布局:圣杯布局，双飞翼布局)xuanzeqi     包括CSS3选择器和Jquery选择器yuanjiao/borderradius   圆角属性yinying/boxshadow   盒模型的阴影border/borderimage   用图片作为边框的背景图片xianxingjianbian     线性渐变jingxiangjianbian    径向渐变wenbenyinying/yinying        设置文本阴影transform       转换rotate translate scale skewtransition/guodu      动画过渡animation       动画语法及实例luanma               解决乱码问题teshufuhao      网页上的一些特殊符号chaolianjie     a标签 锚 下载 邮箱等等get/post        方法innertext      设定通用方法获取指定对象的文本内容ajax           ajax 的用法及其封装json           json语法以及如何使用ajax进行访问该数据jsonp/kuayu    如何使用JSONP进行跨域访问数据html           HTML5的标签总结JavaScriptjavascript    js的组成等基础bianliang      9种数据类型能够做为变量shujuleixing/jibenshujuleixing   具体的基本数据类型及其注意点zuoyongyu      全局做用域，局部做用域，构成做用域链yujiexi        预解析的过程和实例laji/neicun    垃圾收集机制和内存问题number/parseint/parsefloat   把字符串转换为数值string    对字符串的各类操做、以及把指定对象转换为字符串。boolean        布尔值true/falsesanyuanyunsuanfu    三元运算符 a?b:cluojiyunsuanfu/yu/huo/fei   逻辑运算符：与 或 非bijiaoyunsuanfu      比较运算符:> < >= <= == != === !==suanshuyunsuanfu/jiajianchengchu   加减乘除取模alert/prompt/shurukuang/jinggaokuang  提示框和警告框if/for/while/switch        三种条件语句的语法及实例duanlucaozuo               短路操做就是使用：逻辑运算符 或||for                       for实例/水仙花等break/continue          结合上面循环语句进行跳出循环function              js函数的语法hanshu                函数的定义，即各类函数return                函数的各类返回值arguments             函数中的arguments各类属性js内置函数：String  对字符串的各类操做Array   数组Date    获取时间Math    获取js内部的各类函数