jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

同样先上效果图：

怎么样，是不是很好看，jquery fontIconPicker这个插件做的很不错，支持分类，搜索，还有分页功能，可以自定义分页，具体的使用方法我就不一介绍了，我只说一下如何使用font-awesome图标库，只需跟着下面几步走，就可以轻松配置。

1、引入核心样式文件

<link rel="stylesheet" type="text/css" href="jquery-fontIconPicker/css/jquery.fonticonpicker.min.css" />

2、引入主题样式文件，官方提供了四种主题，还可以自定义主题，这里我选择了bootstrap样式 

<link rel="stylesheet" type="text/css" href="jquery-fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />

3、引入font-awesome字体图标库

<!-- Font -->
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />

4、引入jquery

<!-- jQuery -->
<script src="jquery/dist/jquery.min.js"></script>

5、引入fontIconPicker核心js

<!-- icon picker -->
<script type="text/javascript" src="jquery-fontIconPicker/jquery.fonticonpicker.min.js"></script>

6、引入font-awesome icon source

<!-- font-awesome icon source -->
<script type="text/javascript" src="fa-icon-source.js" ></script>

7、创建Input输入框

<input type="text" id="picker" name="picker"/>

8、初始化fontIconPicker

<script type="text/javascript">
    $(function() {
        /**
         * Init the fontIconPickers on the jumbotron
         */
        $('#picker').fontIconPicker({
            source: fa_icons,
            searchSource: fa_icons,
            //useAttribute: true,
            theme: 'fip-bootstrap',
            //attributeName: 'data-icomoon',
            emptyIconValue: 'none',
        });
    });
</script>

是不是很简单呀~ 博主我不想说费了多少周折，最后才弄好的。。。。。在此发出来，方便各位攻城狮参考，也主要是为了我自己以后好找~~哈哈。Demo我会传到附件中。请自行下载。http://download.csdn.net/detail/u014552726/9652873