Feature-rich Font Icon Picker Plugin For jQuery - asIconPicker

File Size: 844 KB
Views Total: 3732
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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


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>
  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.

  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

// Enable the icon picker

// Disable the icon picker

// Destroy the icon picker

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:


  • 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.