This time I will share jQuery Plugin and tutorial about Simple FontAwesome Icon Picker Plugin For Bootstrap, hope it will help you in programming stack.
A simple, easy jQuery icon picker plugin which enables you to easily and quickly pick a Font Awesome (4 and 5) icon using Bootstrap‘s popover and/or dropdown components.
How to use it:
1. Include jQuery library, Font Awesome and Bootstrap framework before you include the FontAwesome Icon Picker plugin.
1 |
< link href = "/path/to/bootstrap.min.css" rel = "stylesheet" > |
2 |
< link href = "/path/to/font-awesome.min.css" rel = "stylesheet" > |
3 |
< script src = "/path/to/jquery.min.js" ></ script > |
4 |
< script src = "/path/to/bootstrap.min.js" ></ script > |
2. Include the FontAwesome Icon Picker’s JS & CSS files in the webpage.
1 |
< link href = "fontawesome-iconpicker.min.css" rel = "stylesheet" > |
2 |
< script src = "fontawesome-iconpicker.js" ></ script > |
3. Create an input field for the icon picker.
1 |
< input class = "icp demo" value = "fa-anchor" type = "text" > |
4. The JavaScript to generate a default icon picker for the input field.
1 |
$( '.demo' ).iconpicker(); |
5. Initialize the icon picker on a Bootstrap dropdown component.
1 |
< div class = "btn-group" > |
2 |
< button data-selected = "graduation-cap" type = "button" class = "icp demo btn btn-default dropdown-toggle iconpicker-component" data-toggle = "dropdown" > |
3 |
Dropdown < i class = "fa fa-fw" ></ i > |
4 |
< span class = "caret" ></ span > |
6 |
< div class = "dropdown-menu" ></ div > |
1 |
$( '.demo' ).iconpicker(); |
6. You’re also allowed to create an inline icon picker on the webpage as follow:
1 |
< label data-title = "Inline picker" |
2 |
data-placement = "inline" |
4 |
data-selected = "fa-align-justify" |
1 |
$( '.demo' ).iconpicker(); |
7. Customize the icon picker in the JavaScript:
01 |
$( '.demo' ).iconpicker({ |
29 |
searchInFooter: false , |
35 |
selectedCustomClass: 'bg-primary ', |
37 |
// list of icon classes |
40 |
fullClassFormatter: function(val) { |
44 |
// children input selector |
45 |
input: ' input,.iconpicker-input ', |
47 |
// use the input as a search box too? |
50 |
// Appends the popover to a specific element. |
51 |
// If not set, the selected element or element parent is used |
54 |
// children component jQuery selector or object, relative to the container element |
55 |
component: ' .input-group-addon,.iconpicker-component ', |
59 |
popover: ' <div class= "iconpicker-popover popover" ><div class= "arrow" ></div> ' + |
60 |
' <div class= "popover-title" ></div><div class= "popover-content" ></div></div> ', |
61 |
footer: ' <div class= "popover-footer" ></div> ', |
62 |
buttons: ' <button class= "iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm" >Cancel</button> ' + |
63 |
' <button class= "iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm" >Accept</button> ', |
64 |
search: ' <input type= "search" class= "form-control iconpicker-search" placeholder= "Type to filter" /> ', |
65 |
iconpicker: ' <div class= "iconpicker" ><div class= "iconpicker-items" ></div></div> ', |
66 |
iconpickerItem: ' <a role= "button" href= "#" class= "iconpicker-item" ><i></i></a>', |