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