NEW: you can now mix various icon fonts and prefixes using a formatter

README.md

@@ -82,7 +82,7 @@ Here are all the possibilities in detail:
 ## Available options
 
 ```javascript
-var opts = {
+var defaults = {
     title: false, // Popover title (optional) only if specified in the template
     selected: false, // use this value as the current item and ignore the original
     defaultValue: false, // use this value as the current item if input or element value is empty
@@ -95,23 +95,24 @@ var opts = {
     searchInFooter: false, // If true, the search will be added to the footer instead of the title
     mustAccept: false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
     selectedCustomClass: 'bg-primary', // Appends this class when to the selected item
-    icons: [], // list of icons (declared at the bottom of this script for maintainability)
-    iconBaseClass: 'fa', // you can customize class prefix and base name, so you can use other icon fonts like the default Bootstrap's
-    iconComponentBaseClass: 'fa fa-fw',
-    iconClassPrefix: 'fa-',
-    input: 'input', // children input selector
+    icons: [], // list of icon classes (declared at the bottom of this script for maintainability)
+    fullClassFormatter: function(val) {
+        return 'fa ' + val;
+    },
+    input: 'input,.iconpicker-input', // children input selector
+    inputSearch: false, // use the input as a search box too?
     container: false, //  Appends the popover to a specific element. If not set, the selected element or element parent is used
-    component: '.input-group-addon', // children component jQuery selector or object, relative to the container element
+    component: '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
     // Plugin templates:
     templates: {
         popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
-                '<div class="popover-title"></div><div class="popover-content"></div></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>',
+            ' <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: '<div class="iconpicker-item"><i></i></div>',
+        iconpickerItem: '<a role="button" href="#" class="iconpicker-item"><i></i></a>',
     }
 };
 ```
@@ -123,5 +124,5 @@ var opts = {
 - [x] Ability to use the user input as the filter instead of the popover input
 - [x] Fix bottomRight position when using component mode
 - [x] Better dropdown compatibility
-- [ ] Ability to mix various class prefixes (maybe having the full name of each icon and removing icon class options?)
-- [ ] Ability to select and copy the icon character (the would need to be hardcoded in js)
+- [x] Ability to mix various class prefixes and use a customizable class formatter function
+- [ ] ~~Ability to select and copy the icon character (the would need to be hardcoded in js)~~ (Use the chrome extension)