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