html的小图标组件,JS组件系列之Bootstrap Icon图标选择组件

前言：最近好多朋友在群里面聊到bootstrap icon图标的问题，比如最常见的菜单管理，每个菜单肯定需要一个对应的菜单图标，要是有一个可视化的图标选择组件就好了，最好是直接选择图标，就能得到对应的class样式。于是乎各种百度，皇天不负有心人，最后被博主找到了，感觉效果还不错，并且支持自定义的图标，今天就拿出来分享下，绝对的干货哦！

一、Bootstrap icon picker组件

这个组件是在github上面搜索的时候找到的，初初看上去，确实是很不错的，并且是基于bootstrap风格的，所以更加适合使用bootstrap风格布局的项目。既然是github上面的，毋庸置疑，这是一个开源组件，源码地址。好了，说了这么多，一起来看看它到底长啥样子吧。

1、组件效果预览

第一次初始化

支持“上一页”和“下一页”

支持自定义图标的选择

支持模糊搜索图标，比如我们搜索camera

选择图标后对应的样式放入到文本框里面

2、组件代码示例(1)普通用法

此组件基于bootstrap和jquery，需要引用的文件如下

在html页面上面放置一个普通的的input文本框

JS初始化

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

这样初始化之后就能看到如上图的效果了。有木有很简单~~

然后我们需要获取选中的值，和普通input文本框的使用方法没有任何区别var bootstrap_icon = $("#txt_boostrap_icon").val();

(2)自定义图标

我们看到使用上面的方法初始化之后，图标的个数是固定的那么几十个。如果我们需要往里面加一些我们自己的icon图标怎么办呢？又或者，我们需要使用背景图片来作为图标，该怎么办？别急，办法总是会有的！我们先来简单看看它的js源码：

总共也就一百多行代码，要看懂也不难。我们重点来看看上面红线匡里面的变量ico