Layui 擴展字體圖標

作者:辰風沐陽 閱讀:2678 發(fā)布時間:2020-06-28 上次更新:2020-06-28

layui 目前(2020-06-28)提供了168個圖標,但是很多時候這些圖標中沒有自己想要的,今天在項目中想找一個二維碼的圖標,但是在layui提供的圖標中并沒有,此時我們可以擴展圖標(阿里巴巴矢量圖標庫 www.iconfont.cn)layui提供的圖標也是取材于此

1. 進入阿里巴巴矢量圖標庫官網(wǎng),登陸賬號


阿里巴巴矢量圖標庫官網(wǎng)

https://www.iconfont.cn

任選一種方式登陸賬號,必須登陸,否則無法進行下載

2. 下載圖標


搜索想要的圖標,滑過圖標、加入購物車

點擊 下載代碼,得到一個zip壓縮包

解壓壓縮包,得到一個文件夾

demo_index.html 示例文件,使用方法看該文件即可

3. 三種使用方式


  • Unicode 引用 (兼容性最好,單色圖標)
  • Font-class 引用 (兼容性良好,單色圖標,單色推薦)
  • Symbol 引用 (兼容性較差,彩色圖標,彩色推薦)

a. Unicode 引用,相對來說較麻煩

b. Font-class 引用

需要修改圖標類名或樣式可在 iconfont.css 中修改

c. Symbol 引用,需要彩色圖標時使用

4. Font-class 使用示例


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="font/iconfont.css">
  7. </head>
  8. <body>
  9. <i class="iconfont icon-erweima"></i>
  10. <br><br>
  11. <i class="iconfont icon-QQ"></i>
  12. <br><br>
  13. <i class="iconfont icon-weixin"></i>
  14. </body>
  15. </html>

標簽: Layui 前端UI框架