fontawesome-iconpicker使用小记

最近一个项目使用了bootstrap框架以及fontawesome小图标，需要做一个图标选择器，查找资料后发现了这个基于bootstrap的图标选择插件，总结下使用方法。

demo下载地址：https://download.csdn.net/download/yzy85/10620084

1、引用jquery.js、bootstrap.css和bootstrap.js文件，版本： 3.3.7

2、引用字体库font-awesome.css 版本：4.4.0

3、引用fontawesome-iconpicker.css和fontawesome-iconpicker.js，版本：1.2.0，该版本匹配font-awesome.css 4.4.0

3、html中使用代码如下：

<div class="input-group">
     <input data-placement="bottomRight"  data-input-search="true"  class="form-control icp icp-auto" value="fa-archive" type="text" />
    <span class="input-group-addon"></span>
</div>

4、页面加载时调用方法：

 <script>
        $(function () {
            $('.icp-auto').iconpicker();
        });
 </script>

  带参数定义

$('.icp-opts').iconpicker({
                    title: 'With custom options',
                    icons: ['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
                    selectedCustomClass: 'label label-success',
                    mustAccept: true,
                    placement: 'bottomRight',
                    showFooter: true,
                    // note that this is ignored cause we have an accept button:
                    hideOnSelect: true
                })

5、效果：

             

6、源码地址：https://github.com/farbelous/fontawesome-iconpicker