layui 第三方组件平台

返回首页 发布组件

iconFonts 图标选择器,里面支持两种图标选择,一种 layui 图标 140个,一种font-awesome图标975个,FontAwesome 4.7.0。基于 iconPicker图标选择器 二次开发。(建议码云上下载)

文档

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" value="" class="layui-input">
</div>
</div>
4、效果图
(1)、layui 图标


(2)、font-awesome 图标


5、基于 https://fly.layui.com/extend/iconPicker/ 二次开发。