阿里巴巴iconfont图标库的完美使用

　　最近在找一些图标，最后发现阿里的图标库是用的最顺手的，也是上手最容易的。

　　让我们打开iconfont的网站http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2，有兴趣的同学或者正在寻找图标库的同学，可以进去看看。

　　现在进行图标的使用。有2种使用方式：

　　一、直接下载，以图片的形式引入页面中。

　　

　　二、加入自己的项目，引用iconfont的代码

　　如果是选择这种方式，首先加入购物车，然后添加至自己的项目中

　　

　　如果是加入自己项目这种方式，那有3种方式引入1、unicode 2、font class 3、symbal

　　1、以unicode方式引入，因为是以unicode方式引入的，所以从代码上看不出引入的是什么，语义不明确，且不支持多色图标

　　第一步：拷贝项目下面生成的font-face　　

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

　　第二步：定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

　　第三步：挑选相应图标并获取字体编码

<i class="iconfont">&#x33;</i>

　　2、以font-class方式引入，从代码上明确知道引入的是什么图标，若要修改只修改clss即可，兼容性好

　　第一步：直接拷贝项目生成的fontclass代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

　　第二步：挑选相应图标

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

　　3、以symbal方式引入，做了一个svg的集合，支持多色图标，但是兼容性差

　　第一步：拷贝项目下面生成的symbol代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

　　第二步：加入通用的css代码

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

　　第三步：挑选相应图标

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