1.打開阿里巴巴矢量圖標庫官網(wǎng)（https://www.iconfont.cn/），有賬號的可以直接登錄劲藐，沒有賬號的需要注冊一個。
2.查找想要的圖標瘩燥。
簡單使用
如果只是需要一兩個圖標：例如想要倒三角，直接搜索“倒三角”不同，便出現(xiàn)相應的圖標厉膀，點擊所需圖標的”下載“按鈕
image-20210907152359548.png
然后會出現(xiàn)彈框，在這里可以選擇想要的顏色
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厌漂。）
立即呈現(xiàn)出一樣的結(jié)果
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
