阿里矢量图标库使用指南

网址：http://www.iconfont.cn

这个网站是阿里巴巴旗下的矢量图标库，首页界面如下：

图标有很多，可以直接在搜索框中搜索：

如果你使用的不多调的，可以直接下载图标拿走去用，完事，下载支持svg，png，ai三种格式的。

如果你可能要使用很多的图标，建议新建一个项目，把找到的图表加入购物车(这里的购物车别怕，不需要钱，放到购物车的图标才可以加入到项目)，然后加入到项目里面去：

把项目下载至本地也有3种方式，unicode，font class，symbol，还记得我以前说过的css3里面的@font-face属性来自定义字体吧？下载之后是个压缩包，直接都可以使用@font-face来使用这些图标了，具体的使用自己登录到这个网站上玩一会就知道了。如下面就是使用unicode这种方式下载后的使用步骤：

unicode使用步骤如下：

@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');

}

html

.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;}

html

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

html