Picka
Font Icon Picker plugin for jQuery
A lightweight font icon picker simple and straightforward. Created specially for WordPress admin environments but can be used anywhere.
Demo http://demo.queryloop.com/picka/
The demo uses icons from FontAwesome http://fontawesome.io/icons/ and Genericons http://genericons.com/ but can be extended to support any icon set.
Usage
HTML
<!-- A wrapper for the icon picker launcher buttons, preview and field --> <div class="icon-picker" data-pickerid="unique_id"> <!-- A field to save the selected icon. --> <input type="hidden" value="" name="unique_id"/> </div> <div class="genericon-set icon-set"> <ul> <!-- data code and class used when saving the icon --> <li data-code="f100" data-class="genericon genericon-standard" class="genericon genericon-standard"></li> <li data-code="f101" data-class="genericon genericon-aside" class="genericon genericon-aside"></li> <li data-code="f102" data-class="genericon genericon-image" class="genericon genericon-image"></li> <!-- ..the rest of the icon set using a similar markup... --> </ul> </div> <div class="fa-set icon-set"> <ul> <li data-code="f042" data-class="fa fa-adjust" class="fa fa-adjust"></li> <li data-code="f170" data-class="fa fa-adn" class="fa fa-adn"></li> <li data-code="f037" data-class="fa fa-align-center" class="fa fa-align-center"></li> <!-- ..the rest of the icon set using a similar markup... --> </ul> </div>JavaScript
jQuery(document).ready(function($){ $('.icon-picker').qlIconPicker({ 'mode' : 'dialog',// show overlay 'dialog' panel or slide down 'inline' panel 'closeOnPick': true, // whether to close panel after picking or 'no' 'save' : 'class', // save icon 'class' or 'code' in the input field 'size' : '', // class to be added to icon panel, 'large' is supported. 'classes' : { // extra classes: 'launcher' : '', // for launcher buttons. In WP Admin, use 'button'. 'clear' : 'remove-times', // for button that removes preview and clears field. In WP Admin, use 'dashicons dashicons-no-alt'. 'highlight': '', // when highlighting an icon. In WP Admin, use 'wp-ui-highlight'. 'close' : '' // for close button. In WP Admin, use 'wp-ui-highlight'. }, 'iconSets' : { // used to specify which launchers will be created 'genericon' : 'Genericon', // create a launcher to pick genericon icons 'fa' : 'FontAwesome' // create a launcher to pick fontawesome icons } }); });You can also specify the icon sets to use and the launcher buttons to create as JSON object in a HTML data attribute:
<div class="icon-picker" data-pickerid="gi" data-iconsets='{"genericon":"Pick Genericon"}'> <input type="hidden" value="" name="unique_id"/> </div>this is useful for WordPress translation
$picker = '<div class="icon-picker" data-pickerid="' . esc_attr( $field['id'] ) . '" data-iconsets=\'' . esc_attr('{"genericon":"' . __( 'Pick Genericon', 'yourtextdomain' ) . '"}') . '\'>'; $picker .= '<input type="hidden" value="' . $value . '" name="' . esc_attr( $field['id'] ) . '" />'; $picker .= '</div>';but you can also use wp_localize_script() and pass the labels in an object when calling the plugin in JavaScript.
For more initialization and usage examples see the demo link.
Events
'iconpickershow.queryloop': triggered when the icon list is shown. Receives the display mode as parameter.
'iconselected.queryloop': triggered when an icon is picked. Receives the icon class or code according to the selected saving mode as parameter
'iconpickerclose.queryloop': triggered when the icon list is closed. Receives the display mode as parameter.
To subscribe to the events, use
(function($){ $body.on('iconselected.queryloop', function(e, icon){ console.log('Icon selected: ' + icon); }); $body.on('iconpickershow.queryloop', function(e, mode){ console.log('Icon picker launched in mode ' + mode); }); $body.on('iconpickerclose.queryloop', function(e, mode){ console.log('Icon picker in mode ' + mode + ' was closed.'); }); })(jQuery);
