搜狗：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 "></i> 这样即可正常显示 向上的箭头。
注意编码：  是从 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内部的各种函数