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