scyf/back/assets/module/iconFonts

iconFonts 图标选择器

介绍

iconFonts图标选择器，里面支持两种图标选择，一种 layui 图标 140个，一种font-awesome图标975个，FontAwesome 4.7.0。

使用教程

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
           // 数据类型：fontClass/layui_icon，
           type: 'layui_icon',
           // 是否开启搜索：true/false
           search: true,
           // 是否开启分页
           page: true,
           // 每页显示数量，默认12
           limit: 12,
           // 点击回调
           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"  lay-filter="iconFonts" value=""   class="layui-input">
          </div>
   </div>
   

4. 项目截图 （1、layui 图标）

（2、font-awesome 图标）

特别鸣谢

1. font-awesome
2. layui
3. font-awesome-cdn
4. iconPicker选择器

疑问联系

1. 使用 iconFonts 过程中有任何问题请联系：jackhhy520@qq.com 或者在下方评论留言。
2. 如果觉得不错，点个 Star 再走也不迟呀！