前端之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
参考链接