在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:iconFonts开源软件地址:https://gitee.com/luckygyl/iconFonts开源软件介绍:iconHhysFa 图标选择器介绍iconHhysFa图标选择器, layui 图标 140个,font-awesome 有786个图标。 使用教程
layui.config({ base: './module/' }).extend({ iconHhysFa: 'iconHhys/iconHhysFa' });
<div class="layui-form"> <blockquote class="layui-elem-quote"> layui图标实例 <a class="layui-btn layui-btn-normal" href="https://gitee.com/luckygyl/iconFonts" target="_blank">码云地址</a> </blockquote> <div class="layui-form-item"> <label for="" class="layui-form-label">默认图标:</label> <div class="layui-input-block"> <input type="text" id="iconHhysFa" lay-filter="" class="hide"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">自定义图标:</label> <div class="layui-input-block"> <input type="text" id="iconHhysFa2" value="" lay-filter="iconHhysFa2" class="hide"> </div> </div> <blockquote class="layui-elem-quote"> font-awesome图标实例 </blockquote> <div class="layui-form-item"> <label for="" class="layui-form-label">默认图标:</label> <div class="layui-input-block"> <input type="text" id="iconHhys" lay-filter="iconHhys" class="hide"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">自定义图标:</label> <div class="layui-input-block"> <input type="text" id="iconHhys2" value="" lay-filter="iconHhys2" class="hide"> </div> </div>
<script> layui.use(['iconHhysFa', 'form', 'layer'], function() { var iconHhysFa = layui.iconHhysFa, form = layui.form, layer = layui.layer, $ = layui.$; iconHhysFa.render({ // 选择器,推荐使用input elem: '#iconHhysFa', // 数据类型:fontClass/awesome,推荐使用fontClass type: 'fontClass', // 是否开启搜索:true/false,默认true search: true, // 是否开启分页:true/false,默认true page: true, // 每页显示数量,默认12 limit: 12, url: '', value: '',//默认图标 // 点击回调 click: function(data) { console.log(data); }, // 渲染成功后的回调 success: function(d) { console.log(d); } }); iconHhysFa.render({ // 选择器,推荐使用input elem: '#iconHhysFa2', // 数据类型:fontClass/awesome,推荐使用fontClass type: 'fontClass', // 是否开启搜索:true/false search: true, url: '', // 是否开启分页 page: true, // 每页显示数量,默认12 limit: 12, value: 'layui-icon-face-smile-fine',//自定义默认图标 // 点击回调 click: function(data) { console.log(data); }, // 渲染成功后的回调 success: function(d) { console.log(d); } }); ////////font-awesome图标实例 iconHhysFa.render({ // 选择器,推荐使用input elem: '#iconHhys', // 数据类型:fontClass/awesome,推荐使用fontClass type: 'awesome', // 是否开启搜索:true/false,默认true search: true, // 是否开启分页:true/false,默认true page: true, // 每页显示数量,默认12 limit: 12, // fa 图标接口 url: './font-awesome/less/variables.less', value:'', //默认图标 // 点击回调 click: function(data) { console.log(data); }, // 渲染成功后的回调 success: function(d) { console.log(d); } }); iconHhysFa.render({ // 选择器,推荐使用input elem: '#iconHhys2', // 数据类型:fontClass/awesome,推荐使用fontClass type: 'awesome', // 是否开启搜索:true/false search: true, // fa 图标接口 url: './font-awesome/less/variables.less', // 是否开启分页 page: true, // 每页显示数量,默认12 limit: 12, // 点击回调 value:'fa-home', //自定义默认图标 click: function(data) { console.log(data); }, // 渲染成功后的回调 success: function(d) { console.log(d); } }); }); </script>
font-awesome的 特别鸣谢疑问联系
|
请发表评论