Bootstrap Icon Picker for Creating Dynamic Menu, Tab or Button – iconPicker.js
Bootstrap Icon Picker for Creating Dynamic Menu, Tab or Button – iconPicker.js
Just like datepicker you can add icon picker as well, it is helpful while creating dynamic items(menu,tab,button) with dynamic icon provided by Bootstrap 3 as glyphicon and need a picker like color picker or date picker from where you can select the icon and corresponding icon-class goes to in your database and you can display menu,tab,button with associated icon dynamically.
Integrate Bootstrap Icon Picker
Libraries
Include dependent libraries on page like bootstrap, jQuery and plugins library.
<!--CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="icon-picker.min.css" media="all" rel="stylesheet" type="text/css" /> <!--JS--> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="iconPicker.min.js"></script>
HTML
Create a simple html input box for the icon picker. You can also create multiple input box for multiple icon picker on same page.
<input type="text" class="icon-picker" /> <br/> <input type="text" class="icon-picker" /> <br/> <input type="text" class="icon-picker" />
JS
Now call the simple online plugin function on the input box class to enable the icon picker.
$(function () { $(".icon-picker").iconPicker(); });
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.