轉載：https://fly.layui.com/jie/19051/
layui的圖示取自于阿裡巴巴的矢量圖示庫 Iconfont，同樣的，這篇教程也是基于Iconfont進行擴充。
-
第一步，通過浏覽器打開 http://iconfont.cn/ ，通路阿裡巴巴矢量圖示庫。
第二步，通過右上角的使用者圖示，授權登陸一個賬号，在此我選擇使用Github作為登陸賬号。
第三步，登陸完成後，讓我們稍微了解下基本的操作。 Iconfont提供了非常多的圖示庫，有官方的圖示資源，也有一些第三方的素材。選擇方式多種多樣，更能內建一些彩色圖示到項目中，在此我們選擇「多彩圖示庫」裡的「多色金融商務小圖示」，作為我們案例。
通過面闆的操作，我們能輕松收藏/下載下傳各類圖示，也能将這些圖示像「添加到購物車」一般加入到一個項目。
将浏覽的圖示都放入購物車，建立一個項目。
第四步，在添加完一個項目後，我們來熟悉一下對項目的管理和操作 設定項目資訊，修改圖示的FontClass字首為「layui-extend」
這是，修改儲存後的效果圖。
第五步，選擇內建方式。 Iconfont提供了兩種內建方式，一種是通過生成線上的CDN資源進行內建，好處就是維護起來非常友善。一個項目會有一個唯一的位址且不變，倉庫更新後也能直接引用而忽略更新的問題。另一種方式則是下載下傳到本地內建，好處是便于保證整個項目的完整度和保留各類版本。
仁者見仁，智者見智，我選擇了下載下傳檔案的方式進行內建。
在點選下載下傳到本地按鈕後，我們得到了一個ZIP包。從layui官網下載下傳架構最新版本，兩者解壓後放在同一個目錄，目錄結構如下。
第六步，在layui目錄下的 css/modules 下建立一個名為layui-icon-extend的目錄，将字型目錄中的以 iconfont開頭的檔案拷貝進去。 第七步，開始寫代碼了！！！ 在頁面引用中引用 layui-icon-extend 下的 iconfont.css檔案，然後就可以使用「 iconfont layui-extend-xxxx 」的方式引用圖示了。
在上面的樣式中，iconfont指的是 iconfont.css 中的樣式名。為避免沖突，一般不推薦修改。當然，如果你引用了較多iconfont上的項目，也是可以修改的。
注意：千萬不要修改為layui-icon，會和 layui自帶的圖示沖突！！ 第八步，讓我們一起來看下效果吧。