fontawesome-iconpicker
Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap,
with a powerful base API, based on bootstrap-popover-picker
You can use Font Awesome 5 or another font icon set of your choice (icon list is totally customizable).
View demos
Instantiation
You can call the plugin in several ways:
$('.my').iconpicker();
$('.my').iconpicker({ });
$('.my').data('iconpicker').iconpickerProperty;
$('.my').data('iconpicker').iconpickerMethod('methodArg1', 'methodArg2' );
$.iconpicker.batch('.my', 'iconpickerMethod', 'methodArg1', 'methodArg2' ); ->
Triggered Events
All of them exposes the plugin instance through event.iconpickerInstance
In order of call:
- iconpickerCreate
- iconpickerCreated
- iconpickerShow
- iconpickerShown
- iconpickerSelect (also exposes event.iconpickerItem and event.iconpickerValue)
- iconpickerUpdate
- iconpickerInvalid (also exposes event.iconpickerValue)
- iconpickerSetValue (also exposes event.iconpickerValue)
- iconpickerSetSourceValue (also exposes event.iconpickerValue)
- iconpickerUpdated
- iconpickerSelected (also exposes event.iconpickerItem and event.iconpickerValue)
- iconpickerHide
- iconpickerHidden
- iconpickerDestroy
- iconpickerDestroyed
$('.my').on('iconpickerSelected', function(event){
});
Popover placement extensions
This plugin comes with more placement options than the original Bootstrap Popover.
Here are all the possibilities in detail:
1 2 3 4 5
G 6
F 7
E 8
D C B A 9
0. inline (no placement, display as inline-block)
1. topLeftCorner
2. topLeft
3. top (center)
4. topRight
5. topRightCorner
6. rightTop
7. right (center)
8. rightBottom
9. bottomRightCorner
A. bottomRight
B. bottom (center)
C. bottomLeft
D. bottomLeftCorner
E. leftBottom
F. left (center)
G. leftTop
Available options
var options = {
title: false,
selected: false,
defaultValue: false,
placement: 'bottom',
collision: 'none',
animation: true,
hideOnSelect: false,
showFooter: false,
searchInFooter: false,
mustAccept: false,
selectedCustomClass: 'bg-primary',
icons: [],
fullClassFormatter: function(val) {
return 'fa ' + val;
},
input: 'input,.iconpicker-input',
inputSearch: false,
container: false,
component: '.input-group-addon,.iconpicker-component',
templates: {
popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
'<div class="popover-title"></div><div class="popover-content"></div></div>',
footer: '<div class="popover-footer"></div>',
buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' +
' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
iconpickerItem: '<a role="button" href="#" class="iconpicker-item"><i></i></a>',
}
};