鑑於Layui 140個圖示可能不太夠用，所以這裡我們需要擴充套件下 分別試了 Font Awesome 和 阿里的IconFont ，其他圖示庫應該是通用的

首先Font Awesome 這裡用的4.7，5.0+emmm是要買授權了嘛。。。不知道，阿里庫就挺好的挺豐富反正 需要先引入font-face（擴充套件其他庫也要這樣）

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
    url('/assets/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
    url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
    url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 

接著覆寫layui-icon這個類

.layui-icon {
    font-family: layui-icon, FontAwesome!important;
}

然後起名字，layui-icon-fa這樣用於區分layui的icon，字尾用font awesome的名字，因為使用fontclass的形式，所以後面的Unicode是我們需要的

.layui-icon-fa-bandcamp:before{
    content: '\f2d5';
}

使用的時候和layui icon的使用方法一致

<i class="layui-icon layui-icon-fa-bandcamp" style="font-size: 30px; color: red;"></i> Font Awesome
 

關於阿里的圖示庫使用就更簡單了，完全不需要上述這麼繁瑣

1. 首先註冊使用者登入；
2. 圖示管理裡建立專案；建立專案的時候，可以這樣設定，這樣子字首就和layui統一了，至於下面的Font Family改不改都行，如果更改那覆寫樣式的時候要改成與之對應的

3. 新增喜歡的圖示到專案裡；

4. 生成線上連結；選中fontclass；複製下方的程式碼，在頁面內引入

5. 覆寫layui-icon這個類

.layui-icon {
    font-family: layui-icon, iconfont !important;
}

6. 使用啦，在4步驟的那個頁面種，Font Class下有對應圖示的class名直接複製使用即可

<i class="layui-icon layui-icon-ali-add" style="font-size: 30px; color: black;"></i> Ali IconFont

最後效果圖： 分別是Font Awesome、Layui Icon、阿里庫（同Font Awesome方式引入）、阿里庫（上述描述方式）