1.打开阿里巴巴矢量图标库官网（https://www.iconfont.cn/），有账号的可以直接登录，没有账号的需要注册一个。
2.查找想要的图标。
简单使用
如果只是需要一两个图标：例如想要倒三角，直接搜索“倒三角”，便出现相应的图标，点击所需图标的”下载“按钮
image-20210907152359548.png
然后会出现弹框，在这里可以选择想要的颜色
image-20210907152442595.png
可选择相应的下载格式：
（1）若选择PNG格式，将图片下载下来直接html中插入。（图像文件的 URL视你图片的位置而定。以下是html和图片文件同一目录的情况）
<img src="/1.png" alt="">
（2）如果是点击了“复制SVG代码”按钮，将复制下来的代码直接在html中粘贴。（很长,我不太推荐）
<svg t="1630999448373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3389" data-spm-anchor-id="a313x.7781069.0.i1" width="200" height="200"><path d="M1024 255.996 511.971 767.909 0 255.996 1024 255.996z" p-id="3390"></path></svg>
大批量使用
如果是大批量需要用到阿里巴巴矢量图标库，可将图标添加入项目：
image-20210907193148732.png
然后进入“我的项目”，
image.png
（1）本地使用
点击“下载至本地”按钮
image.png
下载下来的文件解压后，里面大概是这样子：
image.png
下面我用最简单的例子展示三种方式使用矢量图标：
在<head>元素里面通过link元素引入刚刚下载好并解压的文件里面的iconfont.css文件
<link href="font/iconfont.css" rel="stylesheet" type="text/css" />
<1>方式一Unicode
image.png
复制所需图标的Unicode（如上图所示）,然后
<i class="iconfont"></i>
立即出效果：
image.png
<2>方式二Font class
image.png
复制所需图标的类名（如上图所示），然后
<i class="iconfont icon-daosanjiao"></i>
（注意：元素不能只加当前所想展示图标的类名，记得一定还要加上类名iconfont。）
立即呈现出一样的结果
image.png
<3>方式三Symbol
image.png
在<body>标签底部引入js文件
<script src="font/iconfont.js"></script>
html
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-daosanjiao"></use>
</svg>
css
.icon{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
（2）在线链接使用
image.png
image.png
复制如上两图所示的代码，在本地使用的基础上，将引入的js和css替换成下方这样子即可：
image.png
image.png
（在线链接的好处是，不用像本地使用那样在每次往图标库添加图标后就要下载一次）
6633d79fd65dfc2271782321bbfaffad.gif
