iconfont引入

使用阿里巴巴矢量图标库

引入iconfont，在阿里巴巴iconfont新建自己的项目，上传svg格式的icon。项目会生成iconfont的代码

@font-face {
  font-family: 'iconfont';  /* project id 759319 */
  src: url('//at.alicdn.com/t/font_759319_280b9mztj7j.eot');
  src: url('//at.alicdn.com/t/font_759319_280b9mztj7j.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_759319_280b9mztj7j.woff') format('woff'),
  url('//at.alicdn.com/t/font_759319_280b9mztj7j.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_759319_280b9mztj7j.svg#iconfont') format('svg');
}

设置字体

.icon{
    font-family: 'iconfont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #b2b2b2;
    font-size: 16px;
    &-close:before{
        content: 'e600';
    }
    &-home:before{
        content: 'e614';
    }
}

在html中引入

<i class="icon icon-close"></i>

 ps:每次上传新icon之后需要重新生成引入的iconfont代码，如果是本地引入，需要重新下载替换。