> layui 目前（2020-06-28）提供了168個圖標(biāo)，但是很多時候這些圖標(biāo)中沒有自己想要的，今天在項目中想找一個二維碼的圖標(biāo)，但是在layui提供的圖標(biāo)中并沒有，此時我們可以擴(kuò)展圖標(biāo)（阿里巴巴矢量圖標(biāo)庫 www.iconfont.cn）layui提供的圖標(biāo)也是取材于此 [TOC] #### 1. 進(jìn)入阿里巴巴矢量圖標(biāo)庫官網(wǎng)，登陸賬號 --- **阿里巴巴矢量圖標(biāo)庫官網(wǎng)** https://www.iconfont.cn **任選一種方式登陸賬號，必須登陸，否則無法進(jìn)行下載**  #### 2. 下載圖標(biāo) --- **搜索想要的圖標(biāo)，滑過圖標(biāo)、加入購物車**  **點擊 `下載代碼`，得到一個zip壓縮包**  **解壓壓縮包，得到一個文件夾** `demo_index.html` 示例文件，使用方法看該文件即可  #### 3. 三種使用方式 --- + Unicode 引用 （兼容性最好，單色圖標(biāo)） + Font-class 引用 （兼容性良好，單色圖標(biāo)，單色推薦） + Symbol 引用 （兼容性較差，彩色圖標(biāo)，彩色推薦） **a. Unicode 引用，相對來說較麻煩**  **b. Font-class 引用** 需要修改圖標(biāo)類名或樣式可在 `iconfont.css` 中修改  **c. Symbol 引用，需要彩色圖標(biāo)時使用**  #### 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> ``` 