bootstrap4.0图标使⽤_很不错的两款BootstrapIcon图标选择
组件
⼀、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源码：
总共也就⼀百多⾏代码，要看懂也不难。我们重点来看看上⾯红线匡⾥⾯的变量icons，观察发现这个数组⾥⾯存放的就是我们所有图标的集合。再来看看⽣成的html源码。
由此我们猜想是否可以⾃定义样式也命名为glyphicon-这样的⼀些样式来⾃定义图标呢？有了这个想法，我们在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插件的时候⽆意中发现的，不发现不要紧，仔细研究后发现这组件真⼼不错，尤其是界⾯效果很棒。并且开源，⽂档全，功能丰富。
1、组件效果预览
初始化的时候有⾃定义了四种主题(博主更偏爱第⼀种bootstrap风格的)
⽀持分页
⿏标上上⾯效果
⽀持模糊搜索
⽀持⾃定义每页显⽰的图标个数
选择某个图标后的效果
2、组件代码⽰例
(1)普通⽤法
这个组件不需要bootstrap的⽀持，但是需要jquery的⽀持，不过我们测试的需要还是将bootstrap.css给引⽤进来。
效果炫，必然引⽤的⽂件就多了。
再来看看html准备
1)静态html
No icon
icon-user
icon-search
icon-right-dir
icon-star
icon-cancel
icon-help-circled
icon-info-circled
icon-eye
icon-tag
icon-bookmark
icon-heart
icon-thumbs-down-alt
icon-upload-cloud
icon-phone-squared
icon-cog
icon-wrench
icon-volume-down
jquery是什么功能组件
icon-down-dir
icon-up-dir
icon-left-dir
icon-thumbs-up-alt
2)如果是动态设置图标，这⾥只需要放⼀个空的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的⾃定义图标，你是否也在想，这个组件也能⽀持⾃定义就好了。呵呵，博主也是这样想得。⾏不⾏呢？我们先来试⼀试。
1)使⽤背景图⽚的图标尝试，结果失败
⾸先直接在页⾯上⾯定义⼀个使⽤背景图⽚的样式
.glyphicon-test13 {
background: url('/Content/images/icons/p13.png') no-repeat center center!important;
height: 15px!important;
width: 14px!important;
}
然后将"glyphicon-test13"放⼊到初始化source对应的数组的最后，看似⼤功告成。我们刷新下界⾯看看
事与愿违，图标背景图⽆法正常显⽰。这是为什么呢？好奇⼼⼜来了，审核元素看看：
原来这个组件⽣成的是i标签，它和上⾯的span是不同的，span可以作为容器，⽽只能作为⼀种斜体标签。所以此种尝试失败。但是不服⽓了，你说i标签不是容器没有实际的占位是吧，我们将i⾥⾯写⼊多个空格⾏不⾏呢？
可以看到向i标签⾥⾯加⼊空格之后，确实可以让图⽚显⽰出来，貌似问题完美解决！但是，但是，别⾼兴太早了，选中的时候还是不⾏，因为选中的⾥⾯还是空的i标签。所以总的来说，这种⽅式可以作为⼀种参考思路，后⾯有时间看是否可以适当修改下源码实现这个功能，⽬前这阶段是不⽀持⾃定背景图⽚的！
2)使⽤css写的图标尝试，结果成功
既然⾃定义背景图⽚不⾏，那么如果我们⾃定icon呢，也就是如果我们都通过:before{content:""}这种⽅式来写的图标是否可以呢？答案是可以的。我们到⼀个专门放icon的⽹站，去⾥⾯下载icon包，引⽤到我们项⽬的页⾯中来。
我们随便选两个"ion-android-archive"、"ion-android-arrow-back"放到初始化source对应的数组的最后。刷新界⾯
选中之后
三、⽐较
以上就是两种icon图标选择组件的使⽤⽰例。对⽐⼀下，这种组件其实各有利弊。
1、从界⾯效果来看，第⼆种(jquery fontIconPicker)要⽐第⼀种(Bootstrap icon picker)要好看，界⾯更炫，⽤户体验更好。这个没有争议。
2、从组件的轻量级上⾯来说，第⼀种是要⽐第⼆种更优的，很明显，第⼆种引⽤了那么多的css，肯定或多或少会导致组件的臃肿。
3、从使⽤是否⽅便的⾓度来看，第⼀种使⽤更加简单，更易扩展；第⼆种api 更加全⾯，可⾃定义的项⽐较多，使⽤灵活，但是⾃定义背景图⽚⽬前会有问题。
好了，这篇就到这⾥。如果你的项⽬正好也需要⽤到这种图标选择组件，可以⽤起来试试。
如果⼤家还想深⼊学习，可以点击这⾥进⾏学习，再为⼤家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。