字体图标

现在主流页面上的图标都使用字体图标，这样能减少图片加载数量，提高图片质量，特别是在移动端项目中使用。

使用方法

1、登录阿里图标库
搜索到需要的图标，进行收藏

2、然后添加到项目

3、然后会跳转到个人图标库页面

4、使用在线地址（推荐测试的时候使用，上线的时候得下载到本地）

5、点击 下方新icon来袭，点击更新代码，出现一个css地址，把这个里面的代码拷贝到项目css中

6、最后就可以通过在html使用下面方式使用字体图标，跟修改字体一样修改颜色大小

<i class="iconfont icon-left"></i>

彩色字体图标使用方法

1、需要引用网站生成的js文件

//at.alicdn.com/t/font_1473319176_4914331.js

2、加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3、挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>