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

头部文件引入

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

页面样式，可以自定义

  1. .form-control, .form-group{
  2.     position: relative;
  3. }
  4. .form-group{
  5.     text-align: left;
  6.     margin-bottom: 30px;
  7. }
  8. .form-group label{
  9.     display:block;
  10.     margin-bottom: 15px;
  11. }
  12. .lead iframe{
  13.     display:inline-block;
  14.     vertical-align: middle;
  15. }
  16. /* 如果使用远程，请自行调整图标容器宽度*/
  17. .iconpicker-popover.popover{width:335px;}

页面布局

  1. <div class="container" style="text-align: center ; padding-top: 100px;width:600px">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="form-group">
  5.                 <p>版本使用说明：</p>
  6.                 <p>本地地址使用fontawesome 版本 4.7.0</p>
  7.                 <p>远程地址使用fontawesome 版本 5.0</p>
  8.             </div>
  9.             <div class="form-group">
  10.                 <label>搜索图标</label>
  11.                 <input class="form-control icp icp-auto" data-input-search="true" value="" type="text" />
  12.             </div>
  13.             <div class="form-group">
  14.                 <label>选择图标带按钮</label>
  15.                 <div class="input-group">
  16.                     <input data-placement="bottomRight" class="form-control icp icp-auto" value=""  type="text"/>
  17.                     <span class="input-group-addon"></span>
  18.                 </div>
  19.             </div>
  20.             <div class="form-group">
  21.                 <label>点击下拉按钮显示图标</label>
  22.                 <div class="btn-group">
  23.                     <button data-selected="graduation-cap" type="button" class="icp icp-dd btn btn-default dropdown-toggle iconpicker-component" data-toggle="dropdown">
  24.                         Dropdown  <i class="fa fa-fw"></i>
  25.                         <span class="caret"></span>
  26.                     </button>
  27.                     <div class="dropdown-menu"></div>
  28.                 </div>
  29.                 <div class="btn-group">
  30.                     <button type="button" class="btn btn-primary iconpicker-component"><i class="fa fa-fw fa-heart"></i></button>
  31.                     <button type="button" class="icp icp-dd btn btn-primary dropdown-toggle" data-selected="fa-car" data-toggle="dropdown">
  32.                         <span class="caret"></span>
  33.                         <span class="sr-only">Toggle Dropdown</span>
  34.                     </button>
  35.                     <div class="dropdown-menu"></div>
  36.                 </div>
  37.                 <p class="m-t-10">注意：在下拉列表中，放置由Bootstrap下拉插件控制</p>
  38.             </div>
  39.         </div>
  40.     </div>
  41. </div>

引用 js 文件

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

插件调用

  1. $(function() {
  2.     // 图标可以点击选中 icp-auto 操作图标元素
  3.     $('.icp-auto').iconpicker({
  4.         title: '请选择一个图标',
  5.         //  指定图标
  6.         //icons:['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
  7.         // 添加其他图标 加入 bootstrap  glyphicon 字体图标
  8.         icons: $.merge(['glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
  9.             'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),
  10.         fullClassFormatter: function(val){
  11.             if(val.match(/^fa-/)){
  12.                 return 'fa '+val;
  13.             }else{
  14.                 return 'glyphicon '+val;
  15.             }
  16.         },
  17.         component: '.input-group-addon', // 图标存放容器
  18.        /* Placements: inline topLeftCorner topLeft top topRight topRightCorner rightTop right rightBottom bottomRightCorner bottomRight bottom bottomLeft bottomLeftCorner leftBottom left leftTop*/
  19.         placement:'right',  // 图标容器位置
  20.     });
  21.  
  22.     // 图标不可以点击, 绑定 .icp 元素
  23.     // $.iconpicker.batch('.icp', 'destroy');
  24.  
  25.     // 点击下拉按钮显示图标
  26.     $('.btn-group>button').one("click",function(){
  27.         console.log(1);
  28.         $('.icp-dd').iconpicker({
  29.             //title: 'Dropdown with picker',
  30.             //component:'.btn > i'
  31.         });
  32.     }) ;
  33. });

全部代码

  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>

最终效果图

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

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

  1. this._createPopover();
  2. // 创建 Popover 下面，添加 tab 元素面板
  3. if(this.options.tab && (this.options.tab!='')){
  4.     var glyphicon_active='',layui_active='',fa_active='';
  5.     if(this.options.tab=='glyphicon'){
  6.         glyphicon_active='class="active"';
  7.     }else if(this.options.tab=='layui-icon'){
  8.         layui_active='class="active"';
  9.     }else{
  10.         fa_active='class="active"';
  11.     }
  12.     var  tabHtml=
  13.             "<ul class=\"nav nav-tabs\">\n" +
  14.                 "<li "+fa_active+"><a href=\"#\">fa</a></li>\n" +
  15.                 "<li "+glyphicon_active+"><a href=\"#\">glyphicon</a></li>\n" +
  16.                 "<li "+layui_active+"><a href=\"#\">layui-icon</a></li>\n" +
  17.             "</ul>";
  18.  
  19.     this.popover.find(".popover-content").append(tabHtml);
  20.     this._createTab(this.options.tab);
  21. }
  22. // 创建 Iconpicker  上面
  23. this._createIconpicker();

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

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

根据 tab 选项获取字体图标

  1. // _createPopover 下面 根据tab 选项获取字体图标
  2. _createTab:function(tab_select){
  3.     // 这个地方添加---  改变 this 指向
  4.     var temp_icon_this=[];
  5.     $.ajaxSettings.async = false;// 同步
  6.     var ajax_success=false;
  7.     var data_file='';
  8.     switch (tab_select) {
  9.         case 'glyphicon':
  10.             data_file="./data/glyphicon.json";
  11.            // this.options.tab='glyphicon';
  12.             break;
  13.         case 'layui-icon':
  14.             data_file="./data/layui-icon.json";
  15.            // this.options.tab='layui-icon';
  16.             break;
  17.         default:
  18.           //  this.options.tab='fa';
  19.             break;
  20.     }
  21.     if(data_file!=''){
  22.         temp_icon_this=this.options.icons
  23.         // 加载ajax 数据 https://www.runoob.com/jquery/ajax-post.html
  24.         $.post(data_file,function(data,status,xhr){
  25.             temp_icon_this=data.data;
  26.             ajax_success=true;
  27.         }).error(function(xhr,status,error){
  28.             console.log('XMLHttpRequest 对象： '+xhr);
  29.             console.log('状态：'+status);
  30.             console.log('错误信息：'+error)
  31.         });
  32.     }
  33.     // 请求成功并且有数据
  34.     if((ajax_success==true) && (temp_icon_this.length>=1)){
  35.         this.options.icons= temp_icon_this;
  36.     }else{
  37.         this.options.icons=c.defaultOptions.icons;
  38.     }
  39.     $.ajaxSettings.async = true;// 异步
  40.     return this.options.icons;
  41. },
  42. // _createIconpicker 上面

添加 tab 点击切换事件

  1. _bindElementEvents: function() {
  2.     var c = this;
  3.     // 定义 this 指向下面 添加点击 tab 事件
  4.     c.popover.find('.nav-tabs li').each(function(index,ele){
  5.         $(this).click(function () {
  6.             var icon_name=$(this).children().text();
  7.             if(c.options.tab!=icon_name){
  8.                 // 从新载入面板
  9.                 c._createTab($(this).children().text());
  10.                 c.popover.find(".popover-content>.iconpicker").remove();
  11.                 c._createIconpicker();
  12.                 c.options.tab=icon_name;
  13.                 $(this).addClass('active').siblings().removeClass('active');
  14.             }
  15.         });
  16.     });
  17.     // this.getSearchInput() 上面
  18.     this.getSearchInput().on("keyup.iconpicker", function() {
  19.         c.filter(a(this).val().toLowerCase());
  20.     });

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

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

fontawesome-iconpicker 自定义字体图标选择器的更多相关文章

  1. 微信小程序中使用iconfont/font-awesome等自定义字体图标

    小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...

  2. easyui之自定义字体图标（鼠标覆盖时切换颜色）

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  3. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  4. 在WPF中使用FontAwesome之类的字体图标

    我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression ...

  5. layui 自定义字体图标 扩展

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...

  6. 在webstorm开发微信小程序之使用阿里自定义字体图标

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. ...

  7. Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法

    首先我想说明一下字体图标的好处,最大的好处就是自适应了,而且是使用TextView 不用去切图,是矢量图 灵活调用 第一步我要说明一下一般字体图标的来源,我这里使用的是  --阿里巴巴矢量图标库 -网 ...

  8. React Native 开发豆瓣评分（六）添加字体图标

    添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...

  9. fontIconPicker – 优雅的 jQuery 字体图标选择

    jQuery fontIconPicker 是一个小的 jQuery 插件,它可以让你实现一个优雅的带有分类.搜索和分页功能的图标选择器.图标列表可手动从下拉列表框,图标数组或对象,或者从 Fonte ...

随机推荐

  1. mysql 中 int 等类型如何选择

    详见:https://blog.csdn.net/samll_snail/article/details/86534719 .

  2. 【tensorflow基础】Tensorpack-API

    安装 pip install tensorpack 使用 参考 1. Tensorpack: 2. Tensorpack,一个基于TensorFlow的神经网络训练界面,源码包含很多示例: 完

  3. nginx下只能通过域名，禁止使用ip访问

    今天来了一个需求,ip访问返回500,域名访问正常,只需在nginx.conf中添加 server { listen 80 default; #default 必须加的 return 500; } 也 ...

  4. ObjectARX开发VC版本对照表R14~AutoCAD2020

  5. springboot实战日记(一)数据库基本信息

    摘要:基于spring boot的后端实现,开发一个微信小程序点餐系统,主要是写写思路和遇到的问题以及分享读到的好文章. 项目分析: 1.角色划分,就是开有什么人使用这个系统,买家(手机端),卖家(p ...

  6. idea2019.2激活码到2020.7.1【已失效】，有另外的

    ZKVVPH4MIO-eyJsaWNlbnNlSWQiOiJaS1ZWUEg0TUlPIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55CG5ZWGIGh0dHA6Ly9pZ ...

  7. 05 javascript知识点---BOM和DOM

    1.DOM简单学习(为了满足案例要求) 功能:控制html文档的内容获取页面标签(元素)对象:Element document.getElementById("id值"):通过元素 ...

  8. [十一集训] Day1 (2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018))

    A Altruistic Amphibians 原题 题目大意: n只青蛙在高度为d的井中,每只有跳跃距离.重量和高度,每只青蛙可以借助跳到别的青蛙的背上而跳出井,每只青蛙能承受的最大重量是自身重量, ...

  9. DSL查询与过滤

    1. 什么是DSL查询 由ES提供丰富且灵活的查询语言叫做DSL查询(Query DSL),它允许你构建更加复杂.强大的查询. DSL(Domain Specific Language特定领域语言)以 ...

  10. 我在LeetCode的首次刷题

    到现在为止,我才发现我的博客一篇感受,心得,体会之言都没有. 今天就来随便扯扯. 刷题,是我最近一直在干的事情.也就每天写一两个.忘了就没写这种.也收藏了好几个刷题网站,当然第一次接触肯定是 WUST ...