大部分网站一直使用的图标是奥森图标，而阿里巴巴出品了矢量图标库以后有很多站长就更换使用了阿里的图标，不过阿里的图标库确实非常全面，包含了官方图标、多色图标、单色图标等，而且阿里的图标也非常好看。

如果想给网站引用阿里的图标其实也很简单，只需要生成项目的css外链样式表然后在需要引用图标的地方插入图标代码就可以了，下面给出详细教程。

1.注册账号

阿里巴巴矢量图标库 ：点击进入

如果你已经拥有了账号可以忽略这个步骤，可以使用手机号注册也可以使用微博或者GitHub第三方账号直接登录。

2.查找图标

我们可以直接搜索自己想要的图标，或者在图标库里面翻看查找。

鼠标放在自己想要的图标上面，点击购物车小图标添加入库。

3.添加项目

这个时候右边购物车小图标会显示你添加了几个图标，点开购物车选择添加至项目。

点击文件夹图标，新建一个项目。

项目名称自己可以任意起名，不要过长，使用英文。

此时界面会跳转至项目管理，左侧是项目名称，右侧是图标类型有"Unicode"、"Font"和"Font classSymbol"三种，我们选择如图"Font class"，然后点击"暂无代码，点此生成"

4.项目设置

生成代码后，点击项目设置，这一步比较重要哦~

项目设置如下图，这里建议FontClass前缀使用"font-"，然后Font Family设置"icon"，这样会更好适配大多数网站程序的使用。

保存之后点击更新代码，会重新生成css外链代码。

注意：每次添加图标之后都需要重新点击此处生成一个新的样式代码。

5.引入代码

现在就该引入代码了，上图的代码是一个css的外链样式表，你需要把它放到自己的网站头部即可。

引用格式：

<link href="阿里巴巴图标代码" rel="stylesheet">

引入之后，就可以添加图标了，在需要添加图标的地方插入图标的对应代码。

选择项目里的图标-复制代码，然后放到网站的对应位置。

具体格式：<i class="项目名称 图标代码"></i>

例如我的：<i class="webicon font-home"></i>