阿里图库的简单使用

      相信很多人在做前端开发的时候需要用到很多的小图标，像分享功能里面的微信、QQ、微博等的小图标。所以，今天在这里向大家推荐一个比较好用的网站，百度搜索阿里图库，或者直接链接http://www.iconfont.cn/plus。注册上面的账号（可以用新浪账号登陆）登陆以后，我们首先要新建一个项目，用于保存我们待会儿需要使用的图标。点击里面的图标库按钮，我们选择一个所有图标库。这时的页面右上角有个搜索，我们可以在里面输入我们想要查找的图标名字，比如微信。在找到我们需要的图标以后，我们点击图标上面的购物车样子的图标，叫做添加入库，然后页面右边购物车上就会出现相对应的图标数量的数字。我们先选择两个图标，这时右边购物车的数量是2，点击购物车图标进去以后，我们可以见到刚刚我们选择的两个图标已经在里面了，然后我们直接点击添加至项目，然后勾选我们刚刚建立的新项目就可以了。然后点击下载至本地，然后将下载的压缩包解压缩打开。这时，在打开的文件包里面有3个以 demo开头的html文件，他们是教我们如何使用阿里图库的。这里有三种使用的方法，三种方法各有优缺点，自己看情况选择使用。

第一种是font-class的引用，使用步骤如下:

第一步：引入项目下面生成的fontclass代码:

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-xxx"></i>  这里的icon-xxx中的xxx在demo上面有表明。每一个图标都有自己对应的xxx，这个xxx可以在图标生成的时候选择修改。这时我们就可以在页面上看到我们选择的图标了。

第二种是symbol引用，可以说是未来的主流，也是平台目前比较推荐的用法，支持多色，但是兼容性较差，支持ie9+

第一步：引入项目下面生成的symbol代码:

<script src="./iconfont.js"></script>

第二步：加入通用css代码，只需要加入一次即可:

<style type="text/css">

.......(这段代码在demo里面有，直接复制黏贴就可以了)

</style>

第三步：挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-xxx"></use>

</svg>

第三种是unicode引用，因为unicode是字体在网页端最原始的应用方式，所以它的特点是兼容性最好，支持ie6+，但是因为是字体，所以不支持多色。

第一步：

在<style></style>之间引入代码，需要引用的代码直接从相对应的demo里面复制即可，注意需要修改路径

第二步：

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

好了，关于阿里图库的简单使用就介绍到这里来，在实际开发中，适当的使用阿里图库可以帮助我们提高效率，节省开发时间。