Feature-rich Font Icon Picker Plugin For jQuery - asIconPicker

asIconPicker is a powerful jQuery plugin which enables the user to select a icon from a searchable font icon picker popup. Currently supports Font Awesome iconic font but can be extended to support any icon sets.

How to use it:

1. First you need to include the necessary jQuery, asScrollbar and asTooltip on your html page.

<link rel="stylesheet" href="css/asTooltip.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-asTooltip.min.js"></script>
<script src="js/jquery-asScrollbar.js"></script>

2. Then include the jQuery asIconPicker plugin's files (JavaScript and CSS) on the webpage.

<link rel="stylesheet" href="dist/css/asIconPicker.css">
<script src="dist/jquery-asIconPicker.js"></script>

3. The next step is to create a normal select box containing pre-defined font icons as follows:

<select id="default" name="default" class="default">
  <option>fa-user</option>
  <option>fa-search</option>
  <option>fa-caret-right</option>
  <option>fa-star</option>
  <option>fa-times</option>
  <option>fa-refresh</option>
  <option>fa-rocket</option>
  <option>fa-eye</option>
  <option>fa-tag</option>
  <option>fa-bookmark</option>
  <option>fa-heart</option>
  <option>fa-adn</option>
  <option>fa-cloud-upload</option>
  <option>fa-phone-square</option>
  <option>fa-cog</option>
  <option>fa-wrench</option>
  <option>fa-volume-down</option>
  <option>fa-caret-down</option>
  <option>fa-caret-up</option>
  <option>fa-caret-left</option>
  <option>fa-thumbs-up</option>
</select>

4. Call the function on the select element and we're done.

$('.default').asIconPicker();

5. You can also apply the plugin to an input field that loads data from JavaScript:

<input type="text" name="input" id="default_input"></input>

$('#default_input').asIconPicker(
  source: [{'value': 'fa-caret-right',
            'text': 'Caret-right'},
           {'value': 'fa-star',
            'text': 'Star'},
           {'value': 'fa-heart',
            'text': 'Heart'},
           {'value': 'fa-cloud-upload',
            'text': 'Cloud-upload'},
           {'value': 'fa-phone-square',
            'text': 'Phone-square'},
           {'value': 'fa-bookmark',
            'text': 'Bookmark'}
          ]
});

6. Config the font icon picker. You can pass the following options as key/value object to $.asIconPicker() method.

$('#element').asIconPicker(
  namespace: 'asScrollbar',

  skin: null,
  handleSelector: null,
  handleTemplate: '<div class="{{handle}}"></div>',

  barClass: null,
  handleClass: null,

  disabledClass: 'is-disabled',
  draggingClass: 'is-dragging',
  hoveringClass: 'is-hovering',

  direction: 'vertical',

  barLength: null,
  handleLength: null,

  minHandleLength: 30,
  maxHandleLength: null,

  mouseDrag: true,
  touchDrag: true,
  pointerDrag: true,
  clickMove: true,
  clickMoveStep: 0.3, // 0 - 1
  mousewheel: true,
  mousewheelSpeed: 50,

  keyboard: true,

  useCssTransforms3d: true,
  useCssTransforms: true,
  useCssTransitions: true,

  duration: '500',
  easing: 'ease' // linear, ease-in, ease-out, ease-in-out
});

7. API methods.

// Get the icon
var icon = $('#el').asIconPicker('get');

// Set the icon
$('#el').asIconPicker('set', 'search');

// get the icon
var icon = $('#el').asIconPicker('val'); 
// set the icon
$('#el').asIconPicker('set', 'search');

// Clear the value
$('#el').asIconPicker('clear');

// Enable the icon picker
$('#el').asIconPicker('enable');

// Disable the icon picker
$('#el').asIconPicker('disable');

// Destroy the icon picker
$('#el').asIconPicker('destroy');

8. Events available.

$('#el').on('asIconPicker::ready', function (e) {
  // on ready
});

$('#el').on('asIconPicker::enable', function (e) {
  // on enable
});

$('#el').on('asIconPicker::disable', function (e) {
  // on disable
});

$('#el').on('asIconPicker::destroy', function (e) {
  // on destroy
});

$('#el').on('asIconPicker::init', function (e) {
  // on init
});

Change log:

2017-09-12

• v0.2.4

---

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.