字体图标

字体图标
优点：
1、可以做出跟图片一样可以做的事情，改变透明度、旋转度等
2、但是本质其实是文字，可以很随意改变颜色、产生阴影、透明效果等等；
3、本身体积小，但携带的信息并没有消减
4、几乎支持所有的浏览器
5、移动端设备必备良药；

svg格式的
iconfont.cn里面有很多小图标，可以去里面去查找；
icomoon.io网站也可以；

操作步骤：
1、在样式里面声明字体
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?7kkyc2');
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

2、给盒子使用字体
font-family: "icomoon"; 一定要保证与上面的font-family名字要保持一致；

3、盒子里面添加结构
span::before {
    content:"\e900"
}
或者直接从demo里面复制图标出来
<span>复制出来的文字图标<span>