• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

iconFonts: iconHhyFa图标选择器,里面支持两种图标选择,一种 layui 图标 140个,一 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

iconFonts

开源软件地址:

https://gitee.com/luckygyl/iconFonts

开源软件介绍:

iconHhysFa 图标选择器

介绍

iconHhysFa图标选择器, layui 图标 140个,font-awesome 有786个图标。

使用教程

  1. 加载iconHhysFa
     layui.config({            base: './module/'        }).extend({            iconHhysFa: 'iconHhys/iconHhysFa'        });
  1. 静态页面
<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>            
  1. js
 <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>
  1. 项目截图layui 的输入图片说明

font-awesome的输入图片说明

特别鸣谢

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

疑问联系

  1. 使用 iconHhysFa 过程中有任何问题请联系:[email protected]或者在下方评论留言。
  2. 如果觉得不错,点个 Star 再走也不迟呀!

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap