<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图标选择</title>
    <link rel="stylesheet" href="../../component/layui/css/layui.css">
	<link rel="stylesheet" href="../../component/font-awesome-4.7.0/css/font-awesome.css" />
    <style>
		body{
			margin:10px;
		}
		
	</style>
</head>
<body class="layui-bg-gray">
	<div class="layui-card">
		<div class="layui-card-header">图标选择</div>
		<div class="layui-card-body">
			<div class="layui-form">
			    <div class="layui-form-item">
			        <label for="" class="layui-form-label">选择图标</label>
			        <div class="layui-input-block">
			            <input type="text" id="iconPicker" lay-filter="iconPicker" class="layui-input layui-input">
			        </div>
					<pre class="layui-code">
					layui.use(['iconPicker', 'form','jquery','code'], function () {
					    var iconPicker = layui.iconPicker,
					        form = layui.form,
							$ = layui.jquery;
							
							layui.code();
					    
					    iconPicker.render({
					        // 选择器，推荐使用input
					        elem: '#iconPicker',
					        // 数据类型：fontClass/unicode，推荐使用fontClass
					        type: 'fontClass',
					        // 是否开启搜索：true/false
					        search: true,
					        // 是否开启分页
					        page: true,
					        // 每页显示数量，默认12
					        limit: 12,
					        // 点击回调
					        click: function (data) {
					            console.log(JSON.stringify(data));
					        }
					    });
					});
						</pre>
				
			    </div>
			</div>
		</div>
	</div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../modules/lay-config.js"></script>
    <script>
        layui.use(['iconPicker', 'form','jquery','code'], function () {
            var iconPicker = layui.iconPicker,
                form = layui.form,
				$ = layui.jquery;
				
				layui.code();
            
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: true,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 点击回调
                click: function (data) {
                    alert(JSON.stringify(data));
                }
            });
			
			

        });
    </script>
</body>
</html>