"Bootstrap Icon Picker"
Bootstrap 3.1.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Sample by Mr. M. - Confederation College - IMD Program -->
<!-- from https://github.com/titosust/Bootstrap-icon-picker -->
<div class="container">
<div class="row">
<h2>Mr. M.'s Select TB icons with search.</h2>
<p>
<a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Reference Twitter Bootstrap Documentation</a>
</p>
</div>
</div>
<div id="wraper">
<form method="post">
<input type="text" name="someName" class="icon-picker" placeholder="Click on icon and then search ···❱ " />
</form>
<hr>
<h3>How to change color of icons</h3>
With CSS you can change the color of icons.
<style>
.blue, .blue a {
color: #00f;
}
</style>
<span class="glyphicon glyphicon-search blue"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
* Bootstrap 3.0 IconPicker Style
* Custom Style Elements for IconPicker
*
* Intigrated, Processed and Built with passion by @titosust; Web Developer @vizrt
*/
#wraper{position:absolute;width:400px; left:50%;margin-left: -200px;top:100px;}
input{padding-bottom: 30px;}
.icon-popup{
position: absolute;
width: 278px;
height: 268px;
color: #000;
font-size: 14px;
}
.icon-popup:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0,0,0,0.2);
position: absolute;
top: -7px;
left: 6px;
}
.icon-popup:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
* Bootstrap 3.0 IconPicker - jQuery plugin for Icon selection
*
* Copyright (c) 20013 A. K. M. Rezaul Karim<titosust@gmail.com>
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* https://github.com/titosust/Bootstrap-icon-picker
*
* Version: 1.0.0
*
*/
// add this function to initialize
$(function () {
$(".icon-picker").iconPicker();
});
(function($) {
$.fn.iconPicker = function( options ) {
var mouseOver=false;
var $popup=null;
var icons=new Array("adjust","align-center","align-justify","align-left","align-right","arrow-down","arrow-left","arrow-right","arrow-up","asterisk","backward","ban-circle","barcode","bell","bold","book","bookmark","briefcase","bullhorn","calendar","camera","certificate","check","chevron-down","chevron-left","chevron-right","chevron-up","circle-arrow-down","circle-arrow-left","circle-arrow-right","circle-arrow-up","cloud","cloud-download","cloud-upload","cog","collapse-down","collapse-up","comment","compressed","copyright-mark","credit-card","cutlery","dashboard","download","download-alt","earphone","edit","eject","envelope","euro","exclamation-sign","expand","export","eye-close","eye-open","facetime-video","fast-backward","fast-forward","file","film","filter","fire","flag","flash","floppy-disk","floppy-open","floppy-remove","floppy-save","floppy-saved","folder-close","folder-open","font","forward","fullscreen","gbp","gift","glass","globe","hand-down","hand-left","hand-right","hand-up","hd-video","hdd","header","headphones","heart","heart-empty","home","import","inbox","indent-left","indent-right","info-sign","italic","leaf","link","list","list-alt","lock","log-in","log-out","magnet","map-marker","minus","minus-sign","move","music","new-window","off","ok","ok-circle","ok-sign","open","paperclip","pause","pencil","phone","phone-alt","picture","plane","play","play-circle","plus","plus-sign","print","pushpin","qrcode","question-sign","random","record","refresh","registration-mark","remove","remove-circle","remove-sign","repeat","resize-full","resize-horizontal","resize-small","resize-vertical","retweet","road","save","saved","screenshot","sd-video","search","send","share","share-alt","shopping-cart","signal","sort","sort-by-alphabet","sort-by-alphabet-alt","sort-by-attributes","sort-by-attributes-alt","sort-by-order","sort-by-order-alt","sound-5-1","sound-6-1","sound-7-1","sound-dolby","sound-stereo","star","star-empty","stats","step-backward","step-forward","stop","subtitles","tag","tags","tasks","text-height","text-width","th","th-large","th-list","thumbs-down","thumbs-up","time","tint","tower","transfer","trash","tree-conifer","tree-deciduous","unchecked","upload","usd","user","volume-down","volume-off","volume-up","warning-sign","wrench","zoom-in","zoom-out");
var settings = $.extend({
}, options);
return this.each( function() {
element=this;
if(!settings.buttonOnly && $(this).data("iconPicker")==undefined ){
$this=$(this).addClass("form-control");
$wraper=$("<div/>",{class:"input-group"});
$this.wrap($wraper);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: