jQuery插件fontIconPicker配合FontAwesome字體圖標庫的使用

一樣先上效果圖：

怎麼樣，是否是很好看，jquery fontIconPicker這個插件作的很不錯，支持分類，搜索，還有分頁功能，能夠自定義分頁，具體的使用方法我就不一介紹了，我只說一下如何使用font-awesome圖標庫，只需跟着下面幾步走，就能夠輕鬆配置。

一、引入核心樣式文件

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

二、引入主題樣式文件，官方提供了四種主題，還能夠自定義主題，這裏我選擇了bootstrap樣式 

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

三、引入font-awesome字體圖標庫

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

四、引入jquery

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

五、引入fontIconPicker核心js

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

六、引入font-awesome icon source

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

七、建立Input輸入框

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

八、初始化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