layui 的所有圖標全部採用字體形式，取材於阿里巴巴矢量圖標庫（iconfont）。因此你可以把一個 icon 看作是一個普通的文字，這意味着你直接用 css 控制文字屬性，如 color、font-size，就可以改變圖標的顏色和大小。你可以通過 font-class 或 unicode 來定義不同的圖標。
- Laui內置圖標有140個，但實際項目中用到的並不多，此時就需要去阿里巴巴矢量圖標庫（https://www.iconfont.cn）去下載需要的圖標了（建議註冊個賬號登錄）。下載圖標可參考Fly社區教程：https://fly.layui.com/jie/9149/。
- 下載並解壓後的目錄結構如下：
![在這裏插入圖片描述]()
- 合併到layui.css
如果每次新增圖標都引入新的link肯定使得代碼很臃腫，於是就希望將新圖標合併到layui.css中，這樣只需要引用layui的就可以使用了。步驟如下：
1、引入新增圖標文件到項目中：![在這裏插入圖片描述]()
2、將新增圖標文件中的iconfont.css文件內容全部複製到layui.css中，並修改複製內容中url（即font目錄下的新增目錄iconfont1）；
![在這裏插入圖片描述]()
3、測試圖標
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../layui/dist/css/layui.css">
<title></title>
<style>
body{padding: 10px;}
</style>
</head>
<body>
<button class="layui-btn layui-btn-sm">
<i class="iconfont icon-jieping"></i>
</button>
</body>
</html>
效果：
說明：
1、如果經常新增圖標，建議在iconfont上登錄賬號，然後就可以將新增的圖標都添加到一個項目中了，每次修改圖標時，就在這個項目中操作，然後下載下來，按上述步驟替換掉原來的文件；
2、我看過有的教程把@font-family給改成了layui-icon，我試過了，發現改變後沒什麼用，又何必改呢?
3、.iconfont類中的font-family指向上面的@font-family，表示如果圖標用了iconfont類，則會從@font-family中去加載圖標，這樣可以避免圖標與layui中的圖標重複。
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
例如：新增圖標：
.icon--shang:before {
content: "\e624";
}
但是，layui也有與之相同的content：
.layui-icon-addition:before{content:"\e624"}
content內容可在iconfont.svg中找到，\e624對應unicode編碼爲
<glyph glyph-name="addition" unicode="" d="M544 768L480......