前端之ICON
1、图片法
<div>
<img src="xxx"/>
</div>
2、背景图法
<div class="icon"></div>
.icon{
background-image:url("xxx");
background-size:100% 100%
}
使用雪碧图通过background-position取出每个icon
3、icon-HTML（Unicode）
利用HTML中实体名称/实体编号显示图标的原理，添加自定义字体icon
缺点：单一色、需要在HTML中使用编号
例如：在阿里矢量图标库添加想要的icon
使用：
结果：
4、icon-CSS（font-class）
原理和unicode其实是一样的，只不过是在CSS通过伪类的方式将字体显示出来，只是HTMLunicode编码中的
&#X在CSS要换成\
我们复制
//at.alicdn.com/t/font_874162_gx0nafj3ibe.css在浏览器中打开查看源码：
部分代码如图：
我们发现原理都是一样的，只不过CSS是添加伪元素的方式添加字体图标
使用
显示
5、SVG（Symbol）推荐优先使用
原理：通过JS在页面中绘制出这个矢量图像（JS中存着如何绘制的方法）
官方说明：
样式
使用
显示
6、CSS绘制图标（大神使用，打扰了）
纯CSS做字体icon
参考链接
