阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库
1、单色图标库
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font-veafwwbvy/iconfont.css">
</head>
<body>
<i class="iconfont icon-anzhuoceshi"></i>
</body>
</html>步骤
打开阿里巴巴矢量图标库，在素材库中选择单色图标库
选择一款单色图标并添加入库，点击进入购物车
下载所选择单色图标的代码
复制所下载的压缩文件夹
右击项目所在文件夹，点击在文件资源管理器中显示
粘贴压缩文件夹，并解压至项目文件夹中 ，如下图文件夹font-veafwwbvy
在VSCode中选择文件夹font-veafwwbvy下的iconfont.css中图标的类名，并复制类名，如下图
在html文件中，首先通过link引入iconfont.css的路径，其次，在class中粘贴图标类名 
最终效果
2、多色图标库
1.在线引入
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://at.alicdn.com/t/c/font_4297416_g7ted2244pt.js"></script>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-Nodejs"></use>
</svg>
</body>
</html>步骤
打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标
将选择的多色图标添加入库，并且打开购物车
将购物车中选择的多色图标添加至项目
点击右上角新建文件图标，将多色图标添加到新建项目，点击确定
点击symbol，再点击查看在线链接
点击更新代码，弹出框选择确定
点击复制代码（在线路径），再选择所需要的多色图标，复制代码（多色图标的类名）
将两次复制的代码分别写入下列位置
最终效果图
2.本地引入
示例代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./iconfont.js"></script>
<style>
.icon{
width: 2em;
height: 2em;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-GoogleChrome"></use>
</svg>
</body>
</html>步骤
打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标
将选择的多色图标添加入库，并且打开购物车
将购物车中选择的多色图标添加至项目
点击右上角新建文件图标，将多色图标添加到新建项目，点击确定
点击更新代码，弹出框选择确定
点击图中代码部分
复制以上代码
在项目下方新建iconfont.js文件，将所复制代码写入
复制所选多色图标的类名
在html文件中，引入iconfont.js的路径，并且将所复制的类名写入xlink:href属性中
最终效果
