Bootstrap与jQuery图标选择组件对比：Bootstrap Icon Picker与fontIconPicker实战

作者：橙子时间：2026-10-29 21:05:38浏览：556

本文深入对比两款前端图标选择组件：Bootstrap Icon Picker与jQuery fontIconPicker。详细解析两者的初始化配置、自定义图标扩展方法及API差异，重点探讨在Bootstrap风格项目中如何无缝集成自定义图标，并分析两者在界面美观度、代码轻量级及扩展便利性上的优劣，为开发者提供选型参考。

引言

前言：近期在技术交流群中，许多开发者探讨了Bootstrap图标的使用痛点。以常见的菜单管理模块为例，每个菜单项通常需绑定一个对应的图标。若能提供可视化的图标选择组件，实现“即选即得class样式”的效果，将极大提升开发效率。经过多方检索与测试，博主发现了一款效果优异且支持自定义图标的组件，特此分享，内容详实，值得收藏。

Bootstrap Icon Picker组件详解

一、Bootstrap Icon Picker组件介绍

该组件源自GitHub，初看之下设计精良，且深度契合Bootstrap风格，因此特别适合采用Bootstrap布局的项目。作为开源项目，其源码完全公开，方便二次开发。接下来，我们将通过实际效果展示其功能特性。

1、组件效果预览

首次初始化界面展示

支持用户自定义图标的添加与选择

支持模糊搜索功能，例如输入“camera”即可快速定位

选定图标后，其对应的CSS类名将自动填入文本框

2、组件代码示例（1）基础用法

该组件依赖Bootstrap与jQuery，需在页面中引入以下资源文件：


 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> 
<link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" /> 
<script src="~/Scripts/jquery-1.9.1.js">
</script> 
<script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js">
</script>

在HTML页面中放置一个普通的input文本框用于接收结果：


<input type="text">

JS初始化代码如下：


$(function () { //bootstrap icon初始化 $("#txt_boostrap_icon").iconPicker(); });

完成上述初始化后，即可看到如图所示的效果。操作是否简单直观？

获取选中值的方法与普通input文本框无异，例如：var bootstrap_icon = $("#txt_boostrap_icon").val();

（2）自定义图标扩展

观察上述初始化结果，默认图标数量固定。若需添加自定义图标，或使用背景图片作为图标，该如何操作？我们先通过查看JS源码寻找思路：

源码仅一百余行，易于理解。重点观察红线框内的icons变量，该数组存储了所有可用图标集合。同时，查看生成的HTML源码结构。

由此推测，是否可通过定义类似glyphicon-xxx的CSS样式来实现自定义图标？基于此思路，我们在CSS文件中新增两个自定义样式：

随后，在icons变量中追加test11、test12、test13、test14四项配置：


var icons = new Array("adjust", "align-center", "align-justify", "align-left", "align-right", "arrow-down", "arrow-left", "arrow-right", "arrow-up",......... "zoom-out","test11","test12","test13", "test14");

配置完成后，刷新页面即可看到效果。

由此可见，该组件的最大优势在于扩展自定义图标的便捷性。无论是通过content属性还是背景图片方式，均能无缝对接，扩展性极佳。

jQuery fontIconPicker组件详解

二、jQuery fontIconPicker组件介绍

jQuery fontIconPicker是博主在搜索jQuery插件时偶然发现的。深入研究发现，该组件界面效果出色，且具备开源、文档齐全、功能丰富等优点。源码下载地址：

1、组件效果预览

初始化时支持四种主题风格（博主更推荐第一种Bootstrap风格）

支持分页浏览功能

鼠标悬停时的交互效果

支持模糊搜索功能

支持自定义每页显示的图标数量

选中图标后的界面反馈

2、组件代码示例

（1）基础用法

该组件不强制依赖Bootstrap，但需jQuery支持。为测试方便，我们仍引入了bootstrap.css。


<script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js">

</script> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" /> <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />

由于界面效果丰富，所需引用的资源文件较多。

接下来查看HTML部分的准备工作：

1）静态HTML结构


<select name="myselect"> <option value="">No icon</option> <option>icon-user</option> <option>icon-search</option> <option>icon-right-dir</option> <option>icon-star</option> <option>icon-cancel</option> <option>icon-help-circled</option> <option>icon-info-circled</option> <option>icon-eye</option> <option>icon-tag</option> <option>icon-bookmark</option> <option>icon-heart</option> <option>icon-thumbs-down-alt</option> <option>icon-upload-cloud</option> <option>icon-phone-squared</option> <option>icon-cog</option> <option>icon-wrench</option> <option>icon-volume-down</option> <option>icon-down-dir</option> <option>icon-up-dir</option> <option>icon-left-dir</option> <option>icon-thumbs-up-alt</option> </select>

2）若需动态设置图标，此处仅需放置一个空的select标签即可：


<select name="myselect"></select>

JS初始化代码如下：

1）静态初始化（针对select中已预置option的情况）：


$(function () { //jquery icon初始化 $('#myselect').fontIconPicker(); // Load with default options });

2）动态初始化（针对空select标签）：


$(function () { //jquery icon初始化 $('#myselect').fontIconPicker({ theme: 'fip-bootstrap',//四种主题风格：fip-grey, fip-darkgrey, fip-bootstrap, fip-inverted source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt", "ion-android-alert", "ion-android-apps"], emptyIcon: true,//是否显示空 emptyIconValue: "none",//空值 iconsPerPage: 30, //每页显示图标的个数，默认20 hasSearch: true,//是否显示试试框，默认true }); });

配置过程相对简单，主要涉及几个可设置参数，代码中已包含相应注释，此处不再赘述。

获取选中值同样可直接使用jQuery的val()方法。

（2）自定义图标尝试

参考前文Bootstrap Icon Picker的自定义功能，是否fontIconPicker也支持？博主持怀疑态度，遂进行验证。

1）尝试使用背景图片图标，结果失败

首先在页面中定义一个使用背景图片的CSS样式：


<style type="text/css"> .glyphicon-test13

 { background: url('/Content/images/icons/p13.png') no-repeat center center!important; height: 15px!important; width: 14px!important; 
}
</style>

随后将“glyphicon-test13”加入初始化source数组末尾，看似配置完成。刷新界面查看结果：