layui（iconPickerFa）图标选择器插件，主要用于后台菜单图标管理

小Hier2023-12-27 12:36

话不多说直接上代码

在页面中引入如下代码

html 复制代码

<link rel="stylesheet" href="/template/admin/layui-v2.5.6/css/layui.css">
<script type="text/javascript" src="/template/admin/layui-v2.5.6/layui.js"></script>
<script type="text/javascript" src="/template/admin/iconPicker/iconPickerFa.js"></script>

第二步html页面如图

html 复制代码

<div class="form-group">
     <label class="col-sm-2 control-label">选择图标</label>
           <div class="col-sm-3">
              <input type="text" id="icon" name="menu[icon]" lay-filter="icon" class="hide" value="fa fa-list">
                            
           </div>
</div>

第三步如图代码

javascript 复制代码

<script>

    layui.use(['form', 'upload', 'jquery','table'], function() {
    var form = layui.form,
        upload = layui.upload,
        iconPickerFa = layui.iconPickerFa,
     
        $ = layui.jquery;
        var table = layui.table;
        var iconLess="/template/admin/font-awesome-4.7.0/less/variables.less"
        iconPickerFa.render({
                elem: '#icon',
                url: iconLess,
                limit: 12,
                click: function (data) {
                    $('#icon').val('fa ' + data.icon);
                },
                success: function (d) {
                    console.log(d);
                }
            });
    })
</script>

最终呈现如下图

layui iconPicker插件下载地址