Easy Font Icon Picker with jQuery - picka

picka is an easy to use jQuery plugin which allows you to pick an icon from any font icon sets like Font Awesome, Genericons, etc.

See also:

• jQuery Based Icon Picker For Bootstrap 3 - iconpicker

Basic Usage:

1. Include a font icon set into your document.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

2. Include jQuery Javascript library and the jQuery picka plugin's files in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="icon-picker.min.js"></script>

3. Create an DIV element and specify the icon set using data-* attributes.

<div class="icon-picker" data-pickerid="fa" data-iconsets='{"fa":"Pick FontAwesome"}'>
  <input type="text">
</div>

4. Available options.

// show overlay 'dialog' panel or slide down 'inline' panel
'mode'       : 'dialog',

// whether to close panel after picking or 'no'
'closeOnPick': true,   

// save icon 'class' or 'code'
'save'       : 'class', 

'size'       : '',

'classes'    : {
  // extra classes for launcher buttons
  'launcher' : '', 

  // extra classes for button that removes preview and clears field
  'clear'    : 'remove-times', 

  // extra classes when highlighting an icon
  'highlight': '', 

  // extra classes for close button
  'close'    : ''  
},

// example data structure. Used to specify which launchers will be created
'iconSets' : {          
  // create a launcher to pick genericon icons
  'genericon' : 'Genericon', 

  // create a launcher to pick fontawesome icons
  'fa' : 'FontAwesome' 
}

---

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