NEW: now supporting other icon fonts, defaults are now writtable,

popover title size more dynamic, maxHeight calculator is now in the CSS
side, fix: when input is empty is not longer an error, glyphicons demo

README.md

@@ -4,6 +4,8 @@ fontawesome-iconpicker
 Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap,
 with a powerful base API, based on [bootstrap-popover-picker](http://mjolnic.github.io/bootstrap-popover-picker/)
 
+You can use Font Awesome or another font icon set of your choice (icons options and items are customizable)
+
 [View demos](http://mjolnic.github.io/fontawesome-iconpicker/)
 
 ## Instantiation
@@ -74,4 +76,49 @@ Here are all the possibilities in detail:
     D.      bottomLeftCorner
     E.      leftBottom
     F.      left (center)
-    G.      leftTop
+    G.      leftTop
+
+
+## Available options
+
+```javascript
+    var opts = {
+        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
+        placement: 'bottom', // (has some issues with auto and CSS). auto, top, bottom, left, right
+        collision: 'none', // If true, the popover will be repositioned to another position when collapses with the window borders
+        animation: true, // fade in/out on show/hide ?
+        //hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
+        hideOnSelect: false,
+        showFooter: false,
+        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
+        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
+        // Plugin templates:
+        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: '<div class="iconpicker-item"><i></i></div>',
+        }
+    };
+```
+
+## TO-DO
+- [x] Support other icon fonts
+- [x] Fix: input marked as error when it is empty
+- [ ] Ability to use the user input as the filter instead of the popover input
+- [ ] Fix bottomRight position when using component mode (maybe the popover needs to be
+appended in other element, or use another 'to' in position plugin?)

dist/css/fontawesome-iconpicker.css

@@ -2,8 +2,26 @@
  * Font Awesome Icon Picker
  * http://mjolnic.github.io/fontawesome-iconpicker/
  *
- * Originally written by (c) 2012 Stefan Petre
- * Licensed under the Apache License v2.0
+ * Originally written by (c) 2014 Javier Aguilar @mjolnic
+ * Licensed under the MIT License
+ * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
+ *
+ */
+/*
+ * Font Awesome Icon Picker
+ * http://mjolnic.github.io/fontawesome-iconpicker/
+ *
+ * Originally written by (c) 2014 Javier Aguilar @mjolnic
+ * Licensed under the MIT License
+ * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
+ *
+ */
+/*
+ * Font Awesome Icon Picker
+ * http://mjolnic.github.io/fontawesome-iconpicker/
+ *
+ * Originally written by (c) 2014 Javier Aguilar @mjolnic
+ * Licensed under the MIT License
  * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
  *
  */
@@ -15,7 +33,7 @@
   max-width: none;
   padding: 1px;
   text-align: left;
-  width: 270px;
+  width: 242px;
   background: #f7f7f7;
 }
 .iconpicker-popover.popover.top,
@@ -43,7 +61,7 @@
   margin-left: -10px;
 }
 .iconpicker-popover.popover.inline {
-  margin: 14px 0;
+  margin: 0 0 14px 0;
   position: relative;
   display: inline-block;
   opacity: 1;
@@ -54,7 +72,7 @@
   max-width: 100%;
   box-shadow: none;
   z-index: auto;
-  vertical-align: middle;
+  vertical-align: top;
 }
 .iconpicker-popover.popover.inline > .arrow {
   display: none;
@@ -68,8 +86,8 @@
 }
 .iconpicker-popover.popover .popover-title {
   padding: 14px;
-  font-size: 19.09090909px;
-  line-height: 21px;
+  font-size: 14px;
+  line-height: 16px;
   border-bottom: 1px solid #ebebeb;
   background-color: #f7f7f7;
 }
@@ -267,7 +285,9 @@
   background: #fff;
   margin: 0;
   overflow: hidden;
-  min-height: 60px;
+  overflow-y: auto;
+  min-height: 55px;
+  max-height: 275px;
 }
 .iconpicker .iconpicker-items:before,
 .iconpicker .iconpicker-items:after {
@@ -279,14 +299,14 @@
 }
 .iconpicker .iconpicker-item {
   float: left;
-  width: 21px;
-  height: 21px;
+  width: 14px;
+  height: 14px;
   padding: 14px;
   margin: 0 14px 14px 0;
   text-align: center;
   cursor: pointer;
   border-radius: 3px;
-  font-size: 21px;
+  font-size: 14px;
   box-shadow: 0 0 0 1px #dddddd;
   /*&:nth-child(4n+4) {
             margin-right: 0;