字体图标
使用自定义字体的方式，实现图标
优点：
（1）很容易的任意缩放
（2）很容易的改变颜色
（3）很容易的拥有透明效果
（4）很容易的产生阴影
（5）可以得到CSS很好的支持
（6）浏览器支持很好（IE8+）
字体图标库
http://fontello.com/
http://www.iconfont.cn/ /*常用，阿里巴巴*/
引入
@font-face{
font-family:"myfont"; /*定义的字体名*/
/*阿里示例，下面的代码都是为了兼容*/
src: url('../font/iconfont.eot');/* IE9*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('../font/iconfont.svg#iconfont') format('svg'),
url('../font/iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.woff') format('woff');/* iOS 4.1- */
}
.abc{
font-family:"myfont"；/*使用上面定义的字体名*/
}
下面要注意一下，在视频中使用了伪类before，来将图标插入指的的类前，
视频中大致是这么写的:
.abc{
font-family:"myfont"；
}
.icon-user:before{
content:"\e745";
}
.icon-color{
font-size:32px;
}
<span class='abc icon-user icon-color'>用户</span>
这边通过伪类将图标插入前面，优点是图标的样式更加灵活不需要跟元素的文字保持一致，可单独修改，而且节省了html代码，灵活性更高
而我在实际的操作中，通过阿里图标矢量库中下载到的字体编码为：๴，将字体编码放入代码中，如下所示，
.abc{
font-family:"myfont"；
}
.icon-user:before{
content:"๴";
}
.icon-color{
font-size:32px;
}
<span class='abc icon-user icon-color'>用户</span>
发现 图标并没有显示，因此查询了许久，发现字体编码这个 是实体字符（为了告诉网页需要显示，类似于实体字符上的空格之类的），不能直接在伪类中使用（ 在网页中可以直接使用，不需要转换，但是在伪类中不行）， &#这个开头标注是实体字符， x表示十六进制，而 CSS的content接受的也是16进制的Unicode编码，因此在css伪类中，应该去掉&#x，并用 \ 代替，应该写成content:'\e74'在查询这个资料时，看到阿里巴巴上面写的新的引用字体图标方式：symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
1.支持多色图标了，不再受单色限制。
2.通过一些技巧，支持像字体那样，通过font-size,color来调整样式。3.兼容性较差，支持 ie9+,及现代浏览器。
4.浏览器渲染svg的性能一般，还不如png。
但是由于兼容性问题，暂不深入了解，但是说是未来的主流，应该多加留意