1、加載iconFonts

 layui.config({
        base: "{__FRAME_PATH}js/"  // 配置你下載的iconFonts文件夾路徑
    }).extend({
        IconFonts: 'iconFonts/iconFonts',
    });

2、layui 使用iconFonts

layui.use(['element','form', 'jquery', 'IconFonts'], function () {
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var IconFonts=layui.IconFonts;

        //圖標選擇器
        IconFonts.render({
            // 選擇器，推薦使用input
            elem: '#iconFonts', //選擇器ID
            // 數(shù)據(jù)類型：fontClass/layui_icon，
            type: 'layui_icon',
            // 是否開啟搜索：true/false
            search: true,
            // 是否開啟分頁
            page: true,
            // 每頁顯示數(shù)量，默認12
            limit: 12,
            // 點擊回調(diào)
            click: function (data) {
                //console.log(data);
            }
        });

 /**
         * 默認選選中圖標
         */
        IconFonts.checkIcon("iconFonts","{$info.icon}","layui_icon");

3、html

 <div class="layui-form-item">
      <label class="layui-form-label">選擇圖標</label>
           <div class="layui-input-block">
               <input type="text" name="icon" id="iconFonts"   value=""   class="layui-input">
           </div>
  </div>

4、效果圖
（1）、layui 圖標


（2）、font-awesome 圖標


5、基于 https://fly.layui.com/extend/iconPicker/ 二次開發(fā)。