fontawesome-iconpicker 自定義字體圖標選擇器

時間 2019-11-09

標籤 fontawesome iconpicker 自定義字體圖標選擇器简体版

原文原文鏈接

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

頭部文件引入html

<!--本地地址-->
        <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]-->

頁面樣式，能夠自定義html5

.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;}

頁面佈局jquery

<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 文件css3

<!--本地地址-->
        <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>-->

插件調用git

$(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'
        });
    }) ;
});

所有代碼github

  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

最終效果圖ajax

圖標選擇器添加 tab 切換多種字體

修改 fontawesome-iconpicker.js 一下3個地方
建立 tab 初始元素 json

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 形式，能夠自定義本身的圖標名稱對應請求圖標文件數據bootstrap

{"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',  // 圖標容器位置
    });
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。