1.打開(kāi)阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)（https://www.iconfont.cn/），有賬號(hào)的可以直接登錄，沒(méi)有賬號(hào)的需要注冊(cè)一個(gè)。
2.查找想要的圖標(biāo)。
簡(jiǎn)單使用
如果只是需要一兩個(gè)圖標(biāo)：例如想要倒三角，直接搜索“倒三角”，便出現(xiàn)相應(yīng)的圖標(biāo)，點(diǎn)擊所需圖標(biāo)的”下載“按鈕
image-20210907152359548.png
然后會(huì)出現(xiàn)彈框，在這里可以選擇想要的顏色
image-20210907152442595.png
可選擇相應(yīng)的下載格式：
（1）若選擇PNG格式，將圖片下載下來(lái)直接html中插入。（圖像文件的 URL視你圖片的位置而定。以下是html和圖片文件同一目錄的情況）
<img src="/1.png" alt="">
（2）如果是點(diǎn)擊了“復(fù)制SVG代碼”按鈕，將復(fù)制下來(lái)的代碼直接在html中粘貼。（很長(zhǎng),我不太推薦）
<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>
大批量使用
如果是大批量需要用到阿里巴巴矢量圖標(biāo)庫(kù)，可將圖標(biāo)添加入項(xiàng)目：
image-20210907193148732.png
然后進(jìn)入“我的項(xiàng)目”，
image.png
（1）本地使用
點(diǎn)擊“下載至本地”按鈕
image.png
下載下來(lái)的文件解壓后，里面大概是這樣子：
image.png
下面我用最簡(jiǎn)單的例子展示三種方式使用矢量圖標(biāo)：
在<head>元素里面通過(guò)link元素引入剛剛下載好并解壓的文件里面的iconfont.css文件
<link href="font/iconfont.css" rel="stylesheet" type="text/css" />
<1>方式一Unicode
image.png
復(fù)制所需圖標(biāo)的Unicode（如上圖所示）,然后
<i class="iconfont"></i>
立即出效果：
image.png
<2>方式二Font class
image.png
復(fù)制所需圖標(biāo)的類名（如上圖所示），然后
<i class="iconfont icon-daosanjiao"></i>
（注意：元素不能只加當(dāng)前所想展示圖標(biāo)的類名，記得一定還要加上類名iconfont。）
立即呈現(xiàn)出一樣的結(jié)果
image.png
<3>方式三Symbol
image.png
在<body>標(biāo)簽底部引入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
復(fù)制如上兩圖所示的代碼，在本地使用的基礎(chǔ)上，將引入的js和css替換成下方這樣子即可：
image.png
image.png
（在線鏈接的好處是，不用像本地使用那樣在每次往圖標(biāo)庫(kù)添加圖標(biāo)后就要下載一次）
6633d79fd65dfc2271782321bbfaffad.gif
