> layui 目前（2020-06-28）提供了168個(gè)圖標(biāo)，但是很多時(shí)候這些圖標(biāo)中沒(méi)有自己想要的，今天在項(xiàng)目中想找一個(gè)二維碼的圖標(biāo)，但是在layui提供的圖標(biāo)中并沒(méi)有，此時(shí)我們可以擴(kuò)展圖標(biāo)（阿里巴巴矢量圖標(biāo)庫(kù) www.iconfont.cn）layui提供的圖標(biāo)也是取材于此 [TOC] #### 1. 進(jìn)入阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)，登陸賬號(hào) --- **阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)** https://www.iconfont.cn **任選一種方式登陸賬號(hào)，必須登陸，否則無(wú)法進(jìn)行下載**  #### 2. 下載圖標(biāo) --- **搜索想要的圖標(biāo)，滑過(guò)圖標(biāo)、加入購(gòu)物車(chē)**  **點(diǎn)擊 `下載代碼`，得到一個(gè)zip壓縮包**  **解壓壓縮包，得到一個(gè)文件夾** `demo_index.html` 示例文件，使用方法看該文件即可  #### 3. 三種使用方式 --- + Unicode 引用 （兼容性最好，單色圖標(biāo)） + Font-class 引用 （兼容性良好，單色圖標(biāo)，單色推薦） + Symbol 引用 （兼容性較差，彩色圖標(biāo)，彩色推薦） **a. Unicode 引用，相對(duì)來(lái)說(shuō)較麻煩**  **b. Font-class 引用** 需要修改圖標(biāo)類(lèi)名或樣式可在 `iconfont.css` 中修改  **c. Symbol 引用，需要彩色圖標(biāo)時(shí)使用**  #### 4. Font-class 使用示例 --- ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> </head> <body> <i class="iconfont icon-erweima"></i> <br><br> <i class="iconfont icon-QQ"></i> <br><br> <i class="iconfont icon-weixin"></i> </body> </html> ``` 