在线考试系统 菜单管理使用图标组件

图标组件，这个内容一般用到的地方比较少，但是在权限系统里面 并不陌生，在添加菜单的时候，就会用到图标组件，如果单纯是 手动输入组件的名称。那肯定很悲催，所有在考试系统里面，这个选择图标的的功能，就必须得实现。那怎么实现呢，其实实现起来也非常的简单。

（1）引入对于的JS文件

<link rel="stylesheet" th:href="@{/static/js/plugins/icon/bootstrap-iconpicker.css}">
<script type="text/javascript"  th:src="@{/static/js/plugins/icon/bootstrap-iconpicker.js}">     </script>

（2）在页面中 添加input输入框

  <!-- 角色描述-->
   <div class="form-group">
        <label  class="control-label" >菜单图标：</label>
        <input type="text" class="form-control" name="icon"  id="a_icon">
    </div>

(3) 在页面进行初始化

     $("#a_icon").iconpicker();

(4)最终效果

如果你想自定义图标，也非常的容易哟
在源码里面 可以看到数组

 var Iconpicker = function (element, options) {
     this.$element = $(element);
     this.options  = $.extend({}, Iconpicker.DEFAULTS, this.$element.data());
     this.options  = $.extend({}, this.options, options);
   };

   Iconpicker.ICONSET = {
       mdi : [
           'access-point',
           'access-point-network',
           'account',
           'account-alert',
           'account-box',
           'account-box-outline',
           'account-card-details',
           定义你的图标名称
           ]

目前 在线考试系统里面 已经支持 2000以上图标 供菜单选择，功能强大。
需要源码的小伙伴
https://gitee.com/soul_PreCoder/exam