Bootstrap Icon Picker for Creating Dynamic Menu, Tab or Button – iconPicker.js

0 175

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.

Leave A Reply

Your email address will not be published.