如何将阿里图标库导入到自己的项目中？

前言

一开始做网站时，设计师丢了一个psd过来，图片需要自己切，图标需要自己找，徘徊在font awesome和iconfont之间，最后终究还是被海量图标的iconfont吸引了，然后一直在寻找导入项目方式，最后终于找到两种办法；前提是这个iconfont你要先登录一下，才能进行下面操作；

1、如果你的项目比较小，且所需图标较少，建议使用icon官网推荐的下载单个icon的方法然后项引用图片一样的引用图标，具体方式如下：

（1）在iconfont官网搜索你想搜索的图标名；（例：菜单），顺便吐槽一下，这个上面找图标真的是心累，因为不知道图标设计师会取什么名字

（2）选中一个图标，点击下载，就是第三个红红的那个下载

（3）它会弹出对应的信息，名字啊，谁设计的呀，啥时候设计的，巴拉巴拉一些基础信息；然后你就选择对应的颜色和对应的格式将他下载下来就ok啦~

（4）最后引用就是用img标签引用啦

2、如果你的项目需要图标数量比较多，且颜色可能会变化（设计师可能不喜欢原来的设计了），你就要选择第二种，批量将图标引入到你的项目中；

（1）第一步还是在iconfont选择你需要的图标，

（2）第二步不是点下载了，而是点添加到购物车，唔，就是第一个红红的这个按钮

（3）添加完之后，你的最上角的购物车数量会蹭蹭蹭的长，然后你就点开这个购物车，看到了下面这样子

（4）点击添加至项目，如果你想一次性下载也是很ok的，因为我本身有建过项目，所以就如第一张， 可以点击新增项目，像第二张，然后你就填写项目名称，点击确定，你选择的图标就会保存到项目中了

（5）就来到了项目管理界面，点击点此生成，会出现一个网址链接，选中在这个链接在新窗口粘贴，打开链接，会发现一个css文件，然后ctrl+a全选拷贝下来，在自己的项目中新建一个font.css，粘贴进去，然后引用css在所需页面上，引用标签一般用i

<i class= 'iconfont icon-sanjiaoright' ></i>

第一个类是你拷贝的css里面统一的类名，第二个是图标名称，图表名称就在网站你的项目中，可以拷贝，css文件中也有；

(6)至于三种引用方式，我一般用的第二种，第一种和第三种在这边不多介绍，有需要可以去官网了解一下。