fontawesome-iconpicker 自定义字体图标选择器

官网地址：https://farbelous.io/fontawesome-iconpicker/

头部文件引入

<!--本地地址-->
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="./css/font-awesome.min.css" rel="stylesheet">
        <link href="./css/fontawesome-iconpicker.min.css" rel="stylesheet">
<!--远程地址-->
        <!--<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
        <link href="https://farbelous.io/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css" rel="stylesheet">-->
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

页面样式，可以自定义

.form-control, .form-group{
    position: relative;
}
.form-group{
    text-align: left;
    margin-bottom: 30px;
}
.form-group label{
    display:block;
    margin-bottom: 15px;
}
.lead iframe{
    display:inline-block;
    vertical-align: middle;
}
/* 如果使用远程，请自行调整图标容器宽度*/
.iconpicker-popover.popover{width:335px;}

页面布局

<div class="container" style="text-align: center ; padding-top: 100px;width:600px">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <p>版本使用说明：</p>
                <p>本地地址使用fontawesome 版本 4.7.0</p>
                <p>远程地址使用fontawesome 版本 5.0</p>
            </div>
            <div class="form-group">
                <label>搜索图标</label>
                <input class="form-control icp icp-auto" data-input-search="true" value="" type="text" />
            </div>
            <div class="form-group">
                <label>选择图标带按钮</label>
                <div class="input-group">
                    <input data-placement="bottomRight" class="form-control icp icp-auto" value=""  type="text"/>
                    <span class="input-group-addon"></span>
                </div>
            </div>
            <div class="form-group">
                <label>点击下拉按钮显示图标</label>
                <div class="btn-group">
                    <button data-selected="graduation-cap" type="button" class="icp icp-dd btn btn-default dropdown-toggle iconpicker-component" data-toggle="dropdown">
                        Dropdown  <i class="fa fa-fw"></i>
                        <span class="caret"></span>
                    </button>
                    <div class="dropdown-menu"></div>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-primary iconpicker-component"><i class="fa fa-fw fa-heart"></i></button>
                    <button type="button" class="icp icp-dd btn btn-primary dropdown-toggle" data-selected="fa-car" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu"></div>
                </div>
                <p class="m-t-10">注意：在下拉列表中，放置由Bootstrap下拉插件控制</p>
            </div>
        </div>
    </div>
</div>

引用 js 文件

<!--本地地址-->
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script src="./js/fontawesome-iconpicker.js"></script>
<!--远程地址-->
        <!--<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://farbelous.io/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.js"></script>-->

插件调用

$(function() {
    // 图标可以点击选中 icp-auto 操作图标元素
    $('.icp-auto').iconpicker({
        title: '请选择一个图标',
        //  指定图标
        //icons:['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
        // 添加其他图标 加入 bootstrap  glyphicon 字体图标
        icons: $.merge(['glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
            'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),
        fullClassFormatter: function(val){
            if(val.match(/^fa-/)){
                return 'fa '+val;
            }else{
                return 'glyphicon '+val;
            }
        },
        component: '.input-group-addon', // 图标存放容器
       /* Placements: inline topLeftCorner topLeft top topRight topRightCorner rightTop right rightBottom bottomRightCorner bottomRight bottom bottomLeft bottomLeftCorner leftBottom left leftTop*/
        placement:'right',  // 图标容器位置
    });

    // 图标不可以点击, 绑定 .icp 元素
    // $.iconpicker.batch('.icp', 'destroy');

    // 点击下拉按钮显示图标
    $('.btn-group>button').one("click",function(){
        console.log(1);
        $('.icp-dd').iconpicker({
            //title: 'Dropdown with picker',
            //component:'.btn > i'
        });
    }) ;
});

全部代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="utf-8">
  5         <title>https://farbelous.io/fontawesome-iconpicker/</title>
  6         <!--本地地址-->
  7         <link href="../css/bootstrap.min.css" rel="stylesheet">
  8         <link href="./css/font-awesome.min.css" rel="stylesheet">
  9         <link href="./css/fontawesome-iconpicker.min.css" rel="stylesheet">
 10         <!--远程地址-->
 11         <!--<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 12         <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
 13         <link href="https://farbelous.io/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css" rel="stylesheet">-->
 14         <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
 15         <!--[if lt IE 9]>
 16         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 17         <![endif]-->
 18         <style>
 19             .form-control, .form-group{
 20                 position: relative;
 21             }
 22             .form-group{
 23                 text-align: left;
 24                 margin-bottom: 30px;
 25             }
 26             .form-group label{
 27                 display:block;
 28                 margin-bottom: 15px;
 29             }
 30             .lead iframe{
 31                 display:inline-block;
 32                 vertical-align: middle;
 33             }
 34             /* 如果使用远程，请自行调整图标容器宽度*/
 35             .iconpicker-popover.popover{width:335px;}
 36         </style>
 37     </head>
 38 
 39     <body>
 40         <div class="container" style="text-align: center ; padding-top: 100px;width:600px">
 41             <div class="row">
 42                 <div class="col-md-12">
 43                     <div class="form-group">
 44                         <p>版本使用说明：</p>
 45                         <p>本地地址使用fontawesome 版本 4.7.0</p>
 46                         <p>远程地址使用fontawesome 版本 5.0</p>
 47                     </div>
 48                     <div class="form-group">
 49                         <label>搜索图标</label>
 50                         <input class="form-control icp icp-auto" data-input-search="true" value="" type="text" />
 51                     </div>
 52                     <div class="form-group">
 53                         <label>选择图标带按钮</label>
 54                         <div class="input-group">
 55                             <input data-placement="bottomRight" class="form-control icp icp-auto" value=""  type="text"/>
 56                             <span class="input-group-addon"></span>
 57                         </div>
 58                     </div>
 59                     <div class="form-group">
 60                         <label>点击下拉按钮显示图标</label>
 61                         <div class="btn-group">
 62                             <button data-selected="graduation-cap" type="button" class="icp icp-dd btn btn-default dropdown-toggle iconpicker-component" data-toggle="dropdown">
 63                                 Dropdown  <i class="fa fa-fw"></i>
 64                                 <span class="caret"></span>
 65                             </button>
 66                             <div class="dropdown-menu"></div>
 67                         </div>
 68                         <div class="btn-group">
 69                             <button type="button" class="btn btn-primary iconpicker-component"><i class="fa fa-fw fa-heart"></i></button>
 70                             <button type="button" class="icp icp-dd btn btn-primary dropdown-toggle" data-selected="fa-car" data-toggle="dropdown">
 71                                 <span class="caret"></span>
 72                                 <span class="sr-only">Toggle Dropdown</span>
 73                             </button>
 74                             <div class="dropdown-menu"></div>
 75                         </div>
 76                         <p class="m-t-10">注意：在下拉列表中，放置由Bootstrap下拉插件控制</p>
 77                     </div>
 78                 </div>
 79             </div>
 80         </div>
 81         <!--本地地址-->
 82         <script src="../js/jquery.min.js"></script>
 83         <script src="../js/bootstrap.min.js"></script>
 84         <script src="./js/fontawesome-iconpicker.js"></script>
 85         <!--远程地址-->
 86         <!--<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
 87         <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 88         <script src="https://farbelous.io/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.js"></script>-->
 89         <script>
 90             $(function() {
 91                 // 图标可以点击选中 icp-auto 操作图标元素
 92                 $('.icp-auto').iconpicker({
 93                     title: '请选择一个图标',
 94                     //  指定图标
 95                     //icons:['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
 96                     // 添加其他图标 加入 bootstrap  glyphicon 字体图标
 97                     icons: $.merge(['glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
 98                         'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),
 99                     fullClassFormatter: function(val){
100                         if(val.match(/^fa-/)){
101                             return 'fa '+val;
102                         }else{
103                             return 'glyphicon '+val;
104                         }
105                     },
106                     component: '.input-group-addon', // 图标存放容器
107                    /* Placements: inline topLeftCorner topLeft top topRight topRightCorner rightTop right rightBottom bottomRightCorner bottomRight bottom bottomLeft bottomLeftCorner leftBottom left leftTop*/
108                     placement:'right',  // 图标容器位置
109                 });
110 
111                 // 图标不可以点击, 绑定 .icp 元素
112                 // $.iconpicker.batch('.icp', 'destroy');
113 
114                 // 点击下拉按钮显示图标
115                 $('.btn-group>button').one("click",function(){
116                     console.log(1);
117                     $('.icp-dd').iconpicker({
118                         //title: 'Dropdown with picker',
119                         //component:'.btn > i'
120                     });
121                 }) ;
122             });
123         </script>
124     </body>
125 </html>

View Code

最终效果图

图标选择器添加 tab 切换多种字体

修改 fontawesome-iconpicker.js 一下3个地方
创建 tab 初始元素

this._createPopover(); 
// 创建 Popover 下面，添加 tab 元素面板
if(this.options.tab && (this.options.tab!='')){
    var glyphicon_active='',layui_active='',fa_active='';
    if(this.options.tab=='glyphicon'){
        glyphicon_active='class="active"';
    }else if(this.options.tab=='layui-icon'){
        layui_active='class="active"';
    }else{
        fa_active='class="active"';
    }
    var  tabHtml=
            "<ul class=\"nav nav-tabs\">\n" +
                "<li "+fa_active+"><a href=\"#\">fa</a></li>\n" +
                "<li "+glyphicon_active+"><a href=\"#\">glyphicon</a></li>\n" +
                "<li "+layui_active+"><a href=\"#\">layui-icon</a></li>\n" +
            "</ul>";

    this.popover.find(".popover-content").append(tabHtml);
    this._createTab(this.options.tab);
} 
// 创建 Iconpicker  上面
this._createIconpicker();

字体图标数据 json 形式，可以自定义自己的图标名称对应请求图标文件数据

{"data":["glyphicon-home", "glyphicon-repeat", "glyphicon-search","glyphicon-arrow-left", "glyphicon-arrow-right", "glyphicon-star"]}

根据 tab 选项获取字体图标

// _createPopover 下面 根据tab 选项获取字体图标
_createTab:function(tab_select){
    // 这个地方添加---  改变 this 指向
    var temp_icon_this=[];
    $.ajaxSettings.async = false;// 同步
    var ajax_success=false;
    var data_file='';
    switch (tab_select) {
        case 'glyphicon':
            data_file="./data/glyphicon.json";
           // this.options.tab='glyphicon';
            break;
        case 'layui-icon':
            data_file="./data/layui-icon.json";
           // this.options.tab='layui-icon';
            break;
        default:
          //  this.options.tab='fa';
            break;
    }
    if(data_file!=''){
        temp_icon_this=this.options.icons
        // 加载ajax 数据 https://www.runoob.com/jquery/ajax-post.html
        $.post(data_file,function(data,status,xhr){
            temp_icon_this=data.data;
            ajax_success=true;
        }).error(function(xhr,status,error){
            console.log('XMLHttpRequest 对象： '+xhr);
            console.log('状态：'+status);
            console.log('错误信息：'+error)
        });
    }
    // 请求成功并且有数据
    if((ajax_success==true) && (temp_icon_this.length>=1)){
        this.options.icons= temp_icon_this;
    }else{
        this.options.icons=c.defaultOptions.icons;
    }
    $.ajaxSettings.async = true;// 异步
    return this.options.icons;
},
// _createIconpicker 上面

添加 tab 点击切换事件

_bindElementEvents: function() {
    var c = this;
    // 定义 this 指向下面 添加点击 tab 事件
    c.popover.find('.nav-tabs li').each(function(index,ele){
        $(this).click(function () {
            var icon_name=$(this).children().text();
            if(c.options.tab!=icon_name){
                // 从新载入面板
                c._createTab($(this).children().text());
                c.popover.find(".popover-content>.iconpicker").remove();
                c._createIconpicker();
                c.options.tab=icon_name;
                $(this).addClass('active').siblings().removeClass('active');
            }
        });
    });
    // this.getSearchInput() 上面
    this.getSearchInput().on("keyup.iconpicker", function() {
        c.filter(a(this).val().toLowerCase());
    });

调用示例，自定义图标类型记得 fullClassFormatter 相应的图标标识

$(function() {
    $('.icp-auto').iconpicker({
        title: '请选择一个图标',
        tab:'layui-icon', //定义tab 选项 glyphicon fa  layui-icon
        //  指定图标
        //icons:['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
        // 添加其他图标 加入 bootstrap  glyphicon 字体图标
        /*icons: $.merge(['layui-icon-release','glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
            'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),*/
        fullClassFormatter: function(val){
            if(val.match(/fa-/)){
                return 'fa '+val;
            }else if(val.match(/glyphicon-/)){
                return 'glyphicon '+val;
            }else {
                return 'layui-icon '+val;
            }
        },
        component: '.input-group-addon', // 图标存放容器
       /* Placements: inline topLeftCorner topLeft top topRight topRightCorner rightTop right rightBottom bottomRightCorner bottomRight bottom bottomLeft bottomLeftCorner leftBottom left leftTop*/
        placement:'right',  // 图标容器位置
    });
});