jQuery fontIconPicker v3.1.1

For the react version, look here.

jQuery fontIconPicker is a small jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, an Array or Object of icons or directly from a Fontello config.json or IcoMoon selection.json file. Here are some examples.

‐ ‐ ‐
View on GitHub Install from NPM Use with CDN Download Build (ZIP)
ONLY FOR LOCAL DEMO (when online everything will be allright)
In firefox fontIconPicker icons won't be shown correctly because of CORS. For the same reason "Load icons from JSON config file" won't work on Chrome or IE 10. If you need to do some local testing you can disable strict_origin_policy at your risk.

Installation

Starting version 3.0.0, fontIconPicker has repository in npm and is build through rollupjs with UMD. So you can install with your favorite package manager or include directly with <script>.

jQuery is defined as a peer dependency. Any version greater than 1.12.4 (tested upto 3.3.1) will work.

First install fontIconPicker as your project dependency along with jQuery.

npm install jquery@1.12.4 @fonticonpicker/fonticonpicker --save

Now import or include or require the package.

const jQuery = require( 'jquery' );
const fip = require( '@fonticonpicker/fonticonpicker' )( jQuery );
// Your code

First install fontIconPicker as your project dependency along with jQuery.

yarn add jquery@3.3.1 @fonticonpicker/fonticonpicker

Now import or include or require the package.

const jQuery = require( 'jquery' );
const fip = require( '@fonticonpicker/fonticonpicker' )( jQuery );
// Your code

unpkg.com provides free CDNs for you to consume.

Script

<script type="text/javascript" src="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/js/jquery.fonticonpicker.min.js"></script>

Styles

<!-- styles -->
<!-- base | always include -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker@3.1.1/dist/css/base/jquery.fonticonpicker.min.css">

<!-- default grey-theme -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker@3.0.0-alpha.0/dist/css/themes/grey-theme/jquery.fonticonpicker.grey.min.css">

<!-- optional themes | no need to include default theme -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker@3.0.0-alpha.0/dist/css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker@3.0.0-alpha.0/dist/css/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker@3.0.0-alpha.0/dist/css/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css">

Go to GitHub Release and download a release. Use the compiled JS and CSS files.

All our builds are generated automatically with travis-ci.

How it works

Just include a copy of jQuery, the fontIconPickers script, the fontIconPickers theme and your Font Icons. Now you can trigger it on a SELECT or INPUT[type="text"] element. check the first example to start!

Only plugin dependency is jQuery (1.7.1+).

<!-- jQuery -->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

<!-- fontIconPicker JS -->
<script type="text/javascript" src="jquery.fonticonpicker.min.js"></script>

Include the core CSS file and optional theme

<!-- fontIconPicker core CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fonticonpicker.min.css" />

<!-- required default theme -->
<link rel="stylesheet" type="text/css" href="themes/grey-theme/jquery.fonticonpicker.grey.min.css" />

<!-- optional themes -->
<link rel="stylesheet" type="text/css" href="themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css" />
<link rel="stylesheet" type="text/css" href="themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="themes/inverted-theme/jquery.fonticonpicker.inverted.min.css" />

Include the font files you wish to pick. In this demo page we are using fontAwesome and IcoMoon fonts.

<!-- Font -->
<link rel="stylesheet" type="text/css" href="fontello-7275ca86/css/fontello.css" />
<link rel="stylesheet" type="text/css" href="icomoon/icomoon.css" />

Finally call the fontIconPicker on a SELECT or INPUT[type="text"] element.

Icons will be populated from OPTION elements and will be used as classes by default.

<!-- SELECT element -->
<select id="myselect" name="myselect" class="myselect">
	<option value="">No icon</option>
	<option>icon-user</option>
	<option>icon-search</option>
	<option>icon-right-dir</option>
	<option>icon-star</option>
	<option>icon-cancel</option>
	<option>icon-help-circled</option>
	<option>icon-info-circled</option>
	<option>icon-eye</option>
	<option>icon-tag</option>
	<option>icon-bookmark</option>
	<option>icon-heart</option>
	<option>icon-thumbs-down-alt</option>
	<option>icon-upload-cloud</option>
	<option>icon-phone-squared</option>
	<option>icon-cog</option>
	<option>icon-wrench</option>
	<option>icon-volume-down</option>
	<option>icon-down-dir</option>
	<option>icon-up-dir</option>
	<option>icon-left-dir</option>
	<option>icon-thumbs-up-alt</option>
</select>
<!-- JavaScript -->
<script type="text/javascript">
	// Make sure to fire only when the DOM is ready
	jQuery(document).ready(function($) {
		$('#myselect').fontIconPicker(); // Load with default options
	});
</script>

If you want to apply to text elements then provide a source.

<!-- INPUT element -->
<input type="text" name="mytext" id="mytext" />
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#mytext').fontIconPicker({
			source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
			emptyIcon: false,
			hasSearch: false
		});
	});
</script>

More advanced icon picker is available like the one with categorized icons or one with attribute selector (<i data-icon="&#xe000;"></i>). Please see more examples below.

Examples

This is a basic example where no configuration options are used. Icons are loaded from SELECT > OPTION elements.

<select id="e1_element" name="e1_element">
	<option value="">No icon</option>
	<option>icon-user</option>
	<option>icon-search</option>
	<option>icon-right-dir</option>
	<option>icon-star</option>
	<option>icon-cancel</option>
	<option>icon-help-circled</option>
	<option>icon-info-circled</option>
	<option>icon-eye</option>
	<option>icon-tag</option>
	<option>icon-bookmark</option>
	<option>icon-heart</option>
	<option>icon-thumbs-down-alt</option>
	<option>icon-upload-cloud</option>
	<option>icon-phone-squared</option>
	<option>icon-cog</option>
	<option>icon-wrench</option>
	<option>icon-volume-down</option>
	<option>icon-down-dir</option>
	<option>icon-up-dir</option>
	<option>icon-left-dir</option>
	<option>icon-thumbs-up-alt</option>
</select>
										
jQuery(document).ready(function($) {

	/**
	 * Example 1
	 * Load from SELECT field
	 */
	$('#e1_element').fontIconPicker();

});

When applied on SELECT elements with OPTGROUP the icons will be categorized. Any OPTION field which is not under any OPTGROUP will be put to the Uncategorized category.

<select name="e2_element" id="e2_element">
	<option value="">No Icon</option>
	<option value="57598">Checkmark</option>
	<option value="57599">Checkmark 2</option>
	<option value="57601">Minus</option>
	<option value="57602">Plus</option>
	<option value="57607">Stop</option>
	<option value="57608">Backward</option>
	<option value="57612">Stop 2</option>
	<option value="57613">Backward 2</option>
	<option value="57615">First</option>
	<option value="57616">Last</option>
	<option value="57619">Eject</option>
	<option value="57627">Loop</option>
	<option value="57628">Loop 2</option>
	<option value="57629">Loop 3</option>
	<option value="57630">Shuffle</option>
	<option value="57655">Tab</option>
	<option value="57656">Checkbox checked</option>
	<option value="57657">Checkbox unchecked</option>
	<option value="57658">Checkbox partial</option>
	<option value="57661">Crop</option>
	<option value="57665">Font</option>
	<option value="57666">Text height</option>
	<option value="57667">Text width</option>
	<option value="57672">Omega</option>
	<option value="57673">Sigma</option>
	<option value="57676">Insert template</option>
	<option value="57677">Pilcrow</option>
	<option value="57678">Lefttoright</option>
	<option value="57679">Righttoleft</option>
	<option value="57680">Paragraph left</option>
	<option value="57681">Paragraph center</option>
	<option value="57682">Paragraph right</option>
	<option value="57683">Paragraph justify</option>
	<option value="57684">Paragraph left 2</option>
	<option value="57685">Paragraph center 2</option>
	<option value="57686">Paragraph right 2</option>
	<option value="57687">Paragraph justify 2</option>
	<option value="57690">Newtab</option>
	<option value="57695">Mail</option>
	<option value="57696">Mail 2</option>
	<option value="57697">Mail 3</option>
	<option value="57698">Mail 4</option>
	<option value="57699">Google</option>
	<option value="57708">Instagram</option>
	<option value="57712">Feed 2</option>
	<option value="57713">Feed 3</option>
	<option value="57714">Feed 4</option>
	<option value="57715">Youtube</option>
	<option value="57716">Youtube 2</option>
	<option value="57720">Lanyrd</option>
	<option value="57721">Flickr</option>
	<option value="57722">Flickr 2</option>
	<option value="57723">Flickr 3</option>
	<option value="57724">Flickr 4</option>
	<option value="57725">Picassa</option>
	<option value="57726">Picassa 2</option>
	<option value="57727">Dribbble</option>
	<option value="57728">Dribbble 2</option>
	<option value="57729">Dribbble 3</option>
	<option value="57730">Forrst</option>
	<option value="57731">Forrst 2</option>
	<option value="57732">Deviantart</option>
	<option value="57733">Deviantart 2</option>
	<option value="57734">Steam</option>
	<option value="57735">Steam 2</option>
	<option value="57744">Blogger</option>
	<option value="57745">Blogger 2</option>
	<option value="57749">Tux</option>
	<option value="57762">Delicious</option>
	<option value="57768">Xing</option>
	<option value="57769">Xing 2</option>
	<option value="57770">Flattr</option>
	<option value="57771">Foursquare</option>
	<option value="57772">Foursquare 2</option>
	<option value="57777">Libreoffice</option>
	<option value="57788">Css 3</option>
	<option value="57791">IE</option>
	<option value="57794">IcoMoon</option>
	<optgroup label="Web Applications">
		<option value="57436">Box add</option>
		<option value="57437">Box remove</option>
		<option value="57438">Download</option>
		<option value="57439">Upload</option>
		<option value="57524">List</option>
		<option value="57525">List 2</option>
		<option value="57526">Numbered list</option>
		<option value="57527">Menu</option>
		<option value="57528">Menu 2</option>
		<option value="57531">Cloud download</option>
		<option value="57532">Cloud upload</option>
		<option value="57533">Download 2</option>
		<option value="57534">Upload 2</option>
		<option value="57535">Download 3</option>
		<option value="57536">Upload 3</option>
		<option value="57537">Globe</option>
		<option value="57541">Attachment</option>
		<option value="57545">Bookmark</option>
		<option value="57691">Embed</option>
		<option value="57692">Code</option>
	</optgroup>
	<optgroup label="Business Icons">
		<option value="57347">Office</option>
		<option value="57348">Newspaper</option>
		<option value="57375">Book</option>
		<option value="57376">Books</option>
		<option value="57377">Library</option>
		<option value="57379">Profile</option>
		<option value="57403">Support</option>
		<option value="57406">Address book</option>
		<option value="57432">Cabinet</option>
		<option value="57433">Drawer</option>
		<option value="57434">Drawer 2</option>
		<option value="57435">Drawer 3</option>
		<option value="57450">Bubble</option>
		<option value="57453">Bubble 2</option>
		<option value="57456">User</option>
		<option value="57458">User 2</option>
		<option value="57460">User 3</option>
		<option value="57461">User 4</option>
		<option value="57463">Busy</option>
	</optgroup>
	<optgroup label="eCommerce">
		<option value="57392">Tag</option>
		<option value="57397">Cart</option>
		<option value="57398">Cart 2</option>
		<option value="57399">Cart 3</option>
		<option value="57402">Calculate</option>
	</optgroup>
	<optgroup label="Currency Icons">
	</optgroup>
	<optgroup label="Form Control Icons">
		<option value="57383">Copy</option>
		<option value="57384">Copy 2</option>
		<option value="57385">Copy 3</option>
		<option value="57386">Paste</option>
		<option value="57387">Paste 2</option>
		<option value="57388">Paste 3</option>
		<option value="57484">Settings</option>
		<option value="57594">Cancel circle</option>
		<option value="57595">Checkmark circle</option>
		<option value="57600">Spell check</option>
		<option value="57603">Enter</option>
		<option value="57604">Exit</option>
		<option value="57659">Radio checked</option>
		<option value="57660">Radio unchecked</option>
		<option value="57693">Console</option>
	</optgroup>
	<optgroup label="User Action & Text Editor">
		<option value="57442">Undo</option>
		<option value="57443">Redo</option>
		<option value="57444">Flip</option>
		<option value="57445">Flip 2</option>
		<option value="57446">Undo 2</option>
		<option value="57447">Redo 2</option>
		<option value="57472">Zoomin</option>
		<option value="57473">Zoomout</option>
		<option value="57474">Expand</option>
		<option value="57475">Contract</option>
		<option value="57476">Expand 2</option>
		<option value="57477">Contract 2</option>
		<option value="57539">Link</option>
		<option value="57662">Scissors</option>
		<option value="57668">Bold</option>
		<option value="57669">Underline</option>
		<option value="57670">Italic</option>
		<option value="57671">Strikethrough</option>
		<option value="57674">Table</option>
		<option value="57675">Table 2</option>
		<option value="57688">Indent increase</option>
		<option value="57689">Indent decrease</option>
	</optgroup>
	<optgroup label="Charts and Codes">
		<option value="57493">Pie</option>
	</optgroup>
	<optgroup label="Attentive">
		<option value="57543">Eye blocked</option>
		<option value="57588">Warning</option>
		<option value="57590">Question</option>
		<option value="57591">Info</option>
		<option value="57592">Info 2</option>
		<option value="57593">Blocked</option>
		<option value="57596">Spam</option>
	</optgroup>
	<optgroup label="Multimedia Icons">
		<option value="57356">Image</option>
		<option value="57357">Image 2</option>
		<option value="57362">Play</option>
		<option value="57363">Film</option>
		<option value="57448">Forward</option>
		<option value="57485">Equalizer</option>
		<option value="57547">Brightness medium</option>
		<option value="57548">Brightness contrast</option>
		<option value="57549">Contrast</option>
		<option value="57605">Play 2</option>
		<option value="57606">Pause</option>
		<option value="57609">Forward 2</option>
		<option value="57610">Play 3</option>
		<option value="57611">Pause 2</option>
		<option value="57614">Forward 3</option>
		<option value="57617">Previous</option>
		<option value="57618">Next</option>
		<option value="57620">Volume high</option>
		<option value="57621">Volume medium</option>
		<option value="57622">Volume low</option>
		<option value="57623">Volume mute</option>
		<option value="57624">Volume mute 2</option>
		<option value="57625">Volume increase</option>
		<option value="57626">Volume decrease</option>
	</optgroup>
	<optgroup label="Location and Contact">
		<option value="57344">Home</option>
		<option value="57345">Home 2</option>
		<option value="57346">Home 3</option>
		<option value="57404">Phone</option>
		<option value="57405">Phone hang up</option>
		<option value="57408">Envelope</option>
		<option value="57410">Location</option>
		<option value="57411">Location 2</option>
		<option value="57413">Map</option>
		<option value="57414">Map 2</option>
		<option value="57540">Flag</option>
	</optgroup>
	<optgroup label="Date and Time">
		<option value="57415">History</option>
		<option value="57416">Clock</option>
		<option value="57417">Clock 2</option>
		<option value="57421">Stopwatch</option>
		<option value="57422">Calendar</option>
		<option value="57423">Calendar 2</option>
	</optgroup>
	<optgroup label="Devices">
		<option value="57359">Camera</option>
		<option value="57361">Headphones</option>
		<option value="57364">Camera 2</option>
		<option value="57425">Keyboard</option>
		<option value="57426">Screen</option>
		<option value="57430">Tablet</option>
	</optgroup>
	<optgroup label="Tools">
		<option value="57349">Pencil</option>
		<option value="57350">Pencil 2</option>
		<option value="57352">Pen</option>
		<option value="57355">Paint format</option>
		<option value="57365">Dice</option>
		<option value="57478">Key</option>
		<option value="57479">Key 2</option>
		<option value="57480">Lock</option>
		<option value="57481">Lock 2</option>
		<option value="57482">Unlocked</option>
		<option value="57483">Wrench</option>
		<option value="57486">Cog</option>
		<option value="57487">Cogs</option>
		<option value="57488">Cog 2</option>
		<option value="57663">Filter</option>
		<option value="57664">Filter 2</option>
	</optgroup>
	<optgroup label="Social and Networking">
		<option value="57694">Share</option>
		<option value="57700">Googleplus</option>
		<option value="57701">Googleplus 2</option>
		<option value="57702">Googleplus 3</option>
		<option value="57703">Googleplus 4</option>
		<option value="57704">Google drive</option>
		<option value="57705">Facebook</option>
		<option value="57706">Facebook 2</option>
		<option value="57707">Facebook 3</option>
		<option value="57709">Twitter</option>
		<option value="57710">Twitter 2</option>
		<option value="57711">Twitter 3</option>
		<option value="57717">Vimeo</option>
		<option value="57718">Vimeo 2</option>
		<option value="57719">Vimeo 3</option>
		<option value="57736">Github</option>
		<option value="57737">Github 2</option>
		<option value="57738">Github 3</option>
		<option value="57739">Github 4</option>
		<option value="57740">Github 5</option>
		<option value="57741">Wordpress</option>
		<option value="57742">Wordpress 2</option>
		<option value="57746">Tumblr</option>
		<option value="57747">Tumblr 2</option>
		<option value="57748">Yahoo</option>
		<option value="57755">Soundcloud</option>
		<option value="57756">Soundcloud 2</option>
		<option value="57758">Reddit</option>
		<option value="57759">Linkedin</option>
		<option value="57760">Lastfm</option>
		<option value="57761">Lastfm 2</option>
		<option value="57763">Stumbleupon</option>
		<option value="57764">Stumbleupon 2</option>
		<option value="57765">Stackoverflow</option>
		<option value="57766">Pinterest</option>
		<option value="57767">Pinterest 2</option>
		<option value="57776">Yelp</option>
	</optgroup>
	<optgroup label="Brands">
		<option value="57743">Joomla</option>
		<option value="57750">Apple</option>
		<option value="57751">Finder</option>
		<option value="57752">Android</option>
		<option value="57753">Windows</option>
		<option value="57754">Windows 8</option>
		<option value="57757">Skype</option>
		<option value="57773">Paypal</option>
		<option value="57774">Paypal 2</option>
		<option value="57775">Paypal 3</option>
		<option value="57789">Chrome</option>
		<option value="57790">Firefox</option>
		<option value="57792">Opera</option>
		<option value="57793">Safari</option>
	</optgroup>
	<optgroup label="Files & Documents">
		<option value="57378">File</option>
		<option value="57380">File 2</option>
		<option value="57381">File 3</option>
		<option value="57382">File 4</option>
		<option value="57390">Folder</option>
		<option value="57391">Folder open</option>
		<option value="57778">File pdf</option>
		<option value="57779">File openoffice</option>
		<option value="57780">File word</option>
		<option value="57781">File excel</option>
		<option value="57782">File zip</option>
		<option value="57783">File powerpoint</option>
		<option value="57784">File xml</option>
		<option value="57785">File css</option>
		<option value="57786">Html 5</option>
		<option value="57787">Html 52</option>
	</optgroup>
	<optgroup label="Like & Dislike Icons">
		<option value="57542">Eye</option>
		<option value="57544">Eye 2</option>
		<option value="57550">Star</option>
		<option value="57551">Star 2</option>
		<option value="57552">Star 3</option>
		<option value="57553">Heart</option>
		<option value="57554">Heart 2</option>
		<option value="57555">Heart broken</option>
		<option value="57556">Thumbs up</option>
		<option value="57557">Thumbs up 2</option>
	</optgroup>
	<optgroup label="Emoticons">
		<option value="57558">Happy</option>
		<option value="57559">Happy 2</option>
		<option value="57560">Smiley</option>
		<option value="57561">Smiley 2</option>
		<option value="57562">Tongue</option>
		<option value="57563">Tongue 2</option>
		<option value="57564">Sad</option>
		<option value="57565">Sad 2</option>
		<option value="57566">Wink</option>
		<option value="57567">Wink 2</option>
		<option value="57568">Grin</option>
		<option value="57569">Grin 2</option>
		<option value="57570">Cool</option>
		<option value="57571">Cool 2</option>
		<option value="57572">Angry</option>
		<option value="57573">Angry 2</option>
		<option value="57574">Evil</option>
		<option value="57575">Evil 2</option>
		<option value="57576">Shocked</option>
		<option value="57577">Shocked 2</option>
		<option value="57578">Confused</option>
		<option value="57579">Confused 2</option>
		<option value="57580">Neutral</option>
		<option value="57581">Neutral 2</option>
		<option value="57582">Wondering</option>
		<option value="57583">Wondering 2</option>
	</optgroup>
	<optgroup label="Directional Icons">
		<option value="57584">Point up</option>
		<option value="57585">Point right</option>
		<option value="57586">Point down</option>
		<option value="57587">Point left</option>
		<option value="57631">Arrow up left</option>
		<option value="57632">Arrow up</option>
		<option value="57633">Arrow up right</option>
		<option value="57634">Arrow right</option>
		<option value="57635">Arrow down right</option>
		<option value="57636">Arrow down</option>
		<option value="57637">Arrow down left</option>
		<option value="57638">Arrow left</option>
		<option value="57639">Arrow up left 2</option>
		<option value="57640">Arrow up 2</option>
		<option value="57641">Arrow up right 2</option>
		<option value="57642">Arrow right 2</option>
		<option value="57643">Arrow down right 2</option>
		<option value="57644">Arrow down 2</option>
		<option value="57645">Arrow down left 2</option>
		<option value="57646">Arrow left 2</option>
		<option value="57647">Arrow up left 3</option>
		<option value="57648">Arrow up 3</option>
		<option value="57649">Arrow up right 3</option>
		<option value="57650">Arrow right 3</option>
		<option value="57651">Arrow down right 3</option>
		<option value="57652">Arrow down 3</option>
		<option value="57653">Arrow down left 3</option>
		<option value="57654">Arrow left 3</option>
	</optgroup>
	<optgroup label="Other Icons">
		<option value="57351">Quill</option>
		<option value="57353">Blog</option>
		<option value="57354">Droplet</option>
		<option value="57358">Images</option>
		<option value="57360">Music</option>
		<option value="57366">Pacman</option>
		<option value="57367">Spades</option>
		<option value="57368">Clubs</option>
		<option value="57369">Diamonds</option>
		<option value="57370">Pawn</option>
		<option value="57371">Bullhorn</option>
		<option value="57372">Connection</option>
		<option value="57373">Podcast</option>
		<option value="57374">Feed</option>
		<option value="57389">Stack</option>
		<option value="57393">Tags</option>
		<option value="57394">Barcode</option>
		<option value="57395">Qrcode</option>
		<option value="57396">Ticket</option>
		<option value="57400">Coin</option>
		<option value="57401">Credit</option>
		<option value="57407">Notebook</option>
		<option value="57409">Pushpin</option>
		<option value="57412">Compass</option>
		<option value="57418">Alarm</option>
		<option value="57419">Alarm 2</option>
		<option value="57420">Bell</option>
		<option value="57424">Print</option>
		<option value="57427">Laptop</option>
		<option value="57428">Mobile</option>
		<option value="57429">Mobile 2</option>
		<option value="57431">Tv</option>
		<option value="57440">Disk</option>
		<option value="57441">Storage</option>
		<option value="57449">Reply</option>
		<option value="57451">Bubbles</option>
		<option value="57452">Bubbles 2</option>
		<option value="57454">Bubbles 3</option>
		<option value="57455">Bubbles 4</option>
		<option value="57457">Users</option>
		<option value="57459">Users 2</option>
		<option value="57462">Quotes left</option>
		<option value="57464">Spinner</option>
		<option value="57465">Spinner 2</option>
		<option value="57466">Spinner 3</option>
		<option value="57467">Spinner 4</option>
		<option value="57468">Spinner 5</option>
		<option value="57469">Spinner 6</option>
		<option value="57470">Binoculars</option>
		<option value="57471">Search</option>
		<option value="57489">Hammer</option>
		<option value="57490">Wand</option>
		<option value="57491">Aid</option>
		<option value="57492">Bug</option>
		<option value="57494">Stats</option>
		<option value="57495">Bars</option>
		<option value="57496">Bars 2</option>
		<option value="57497">Gift</option>
		<option value="57498">Trophy</option>
		<option value="57499">Glass</option>
		<option value="57500">Mug</option>
		<option value="57501">Food</option>
		<option value="57502">Leaf</option>
		<option value="57503">Rocket</option>
		<option value="57504">Meter</option>
		<option value="57505">Meter 2</option>
		<option value="57506">Dashboard</option>
		<option value="57507">Hammer 2</option>
		<option value="57508">Fire</option>
		<option value="57509">Lab</option>
		<option value="57510">Magnet</option>
		<option value="57511">Remove</option>
		<option value="57512">Remove 2</option>
		<option value="57513">Briefcase</option>
		<option value="57514">Airplane</option>
		<option value="57515">Truck</option>
		<option value="57516">Road</option>
		<option value="57517">Accessibility</option>
		<option value="57518">Target</option>
		<option value="57519">Shield</option>
		<option value="57520">Lightning</option>
		<option value="57521">Switch</option>
		<option value="57522">Powercord</option>
		<option value="57523">Signup</option>
		<option value="57529">Tree</option>
		<option value="57530">Cloud</option>
		<option value="57538">Earth</option>
		<option value="57546">Bookmarks</option>
		<option value="57589">Notification</option>
		<option value="57597">Close</option>
	</optgroup>
</select>
										
jQuery(document).ready(function($) {

	/**
	 * Example 2
	 * Load from SELECT with optgroup for auto categorizing
	 */
	$('#e2_element').fontIconPicker({
		useAttribute: true,
		theme: 'fip-bootstrap',
		attributeName: 'data-icomoon'
	});

});

You can of course trigger fontIconPicker on an INPUT[type="text"] field, loading the icon set through the source option. 

<input type="text" id="e3_element" name="e3_element" />
										
jQuery(document).ready(function($) {

	/**
	 * Example 3
	 * Load from INPUT text field with simple source
	 */
	$('#e3_element').fontIconPicker({
		source: fnt_icons,
		theme: 'fip-darkgrey'
	});

});

You can pass an object to the source option to categorize the icons. 

<input type="text" id="e4_element" name="e4_element" />
										
jQuery(document).ready(function($) {

	/**
	 * Example 4
	 * Load from INPUT text field with categorized source
	 */
	$('#e4_element').fontIconPicker({
		source: fnt_icons_categorized,
		theme: 'fip-bootstrap'
	});

});

Pass searchSource option to give manual search strings for icons. The searchSource should be of the same format (i.e, either Array or Object) and order of the source option.

This example uses useAttribute to enable attribute selector for printing fonts. Also in accordance with the font stylesheet, the attribute name has been changed to data-icomoon.

<input type="text" id="e5_element" name="e5_element" />
										
jQuery(document).ready(function($) {

	/**
	 * Example 5
	 * Load with custom search and attribute selector
	 */

	$('#e5_element').fontIconPicker({
		source: icm_icons_2,
		searchSource: icm_icon_search_2,
		useAttribute: true,
		attributeName: 'data-icomoon',
		theme: 'fip-bootstrap'
	});

});

You can change icons on the fly using the setIcons API.

Do note that we are doing a e.stopPropagation(); on button clicks to stop the event migrate back to the document. This prevents the font picker from being closed automatically when the change icon buttons are clicked.

<input type="text" id="e6_element" name="e6_element" />
<span id="e6_buttons">
	<button type="button" class="btn btn-primary set_all">All Icons</button>
	<button type="button" class="btn btn-default set_cat">Categorized Icons</button>
	<button type="button" class="btn btn-default set_1">Set 1</button>
	<button type="button" class="btn btn-default set_2">Set 2</button>
</span>
										
jQuery(document).ready(function($) {

	/**
	 * Example 6
	 * Change icon set on the fly
	 */

	// Init the picker
	var e6_element = $('#e6_element').fontIconPicker({
		source: fnt_icons,
		theme: 'fip-darkgrey'
	});

	// Bind the click event on the buttons
	$('#e6_buttons').on('click', 'button', function(e) {
		e.preventDefault();

		// First change classes of every buttons
		$('#e6_buttons').find('button').removeClass('btn-primary').addClass('btn-default');

		// Change the icon according to which button was clicked
		var _self = $(this);

		// If all
		if ( _self.hasClass('set_all') ) {
			e6_element.setIcons(fnt_icons);
		// If categorized
		} else if ( _self.hasClass('set_cat') ) {
			e6_element.setIcons(fnt_icons_categorized);
		// If set one
		} else if ( _self.hasClass('set_1') ) {
			e6_element.setIcons(fnt_icons_1);
		// If set two
		} else {
			e6_element.setIcons(fnt_icons_2);
		}

		// Change the appearance
		_self.removeClass('btn-default').addClass('btn-primary');

		// Stop propagation to prevent event bubbling
		// We could've also done return false, but it is deprecated now
		e.stopPropagation();
	});
});

In this example we're going to disable search and the ability to leave fontIconPicker empty.

<input type="text" id="e7_element" name="e7_element" />
										
jQuery(document).ready(function($) {

	/**
	 * Example 7
	 * No empty icons and no search
	 */
	$('#e7_element').fontIconPicker({
		source: fnt_icons_categorized,
		emptyIcon: false,
		hasSearch: false
	});

});

Without having to manually populate fonts you can load them from a json file. Following an example using Fontello config.json file. fontIconPicker will be first instantiated with a loading icon, when AJAX does its thing icons will magically appears! If something goes wrong, before asking for help, remember CORS!!

<input type="text" id="e8_element" name="e8_element" />
<span id="e8_buttons">
	<button autocomplete="off" type="button" class="btn btn-primary">Load from Fontello config.json</button>
</span>
										
jQuery(document).ready(function($) {

	/**
	 * Example 8
	 * Load icons from Fontello JSON config file
	 */

	// Init the font icon picker
	var e8_element = $('#e8_element').fontIconPicker({
		theme: 'fip-bootstrap'
	});

	// Add the event on the button
	$('#e8_buttons button').on('click', function(e) {
		e.preventDefault();

		// Show processing message
		$(this).prop('disabled', true).html('<i class="icon-cog demo-animate-spin"></i> Please wait...');

		// Get the JSON file
		$.ajax({
			url: 'fontello-7275ca86/config.json',
			type: 'GET',
			dataType: 'json'
		})
		.done(function(response) {

			var fontello_json_icons = [];

			// Push the fonts into the array
			$.each(response.glyphs, function(i, v) {
				fontello_json_icons.push( response.css_prefix_text + v.css );
			});

			// Set new fonts
			e8_element.setIcons(fontello_json_icons);

			// Show success message and disable
			$('#e8_buttons button').removeClass('btn-primary').addClass('btn-success').text('Successfully loaded icons').prop('disabled', true);

		})
		.fail(function() {
			// Show error message and enable
			$('#e8_buttons button').removeClass('btn-primary').addClass('btn-danger').text('Error: Try Again?').prop('disabled', false);
		});
		e.stopPropagation();
	});

});

Similar to before you can also load fonts from IcoMoon selection.json file. The examples are very similar with just the difference being the data format of the json file. We will also be joining the tags of the icons to create a different search set.

<input type="text" id="e9_element" name="e9_element" />
<span id="e9_buttons">
	<button autocomplete="off" type="button" class="btn btn-primary">Load from IcoMoon selection.json</button>
</span>
										
jQuery(document).ready(function($) {

	/**
	 * Example 9
	 * Load icons from icomoon JSON selections file
	 */

	// Init the font icon picker
	var e9_element = $('#e9_element').fontIconPicker({
		theme: 'fip-bootstrap'
		});

	// Add the event on the button
	$('#e9_buttons button').on('click', function(e) {
		e.preventDefault();

		// Show processing message
		$(this).prop('disabled', true).html('<i class="icon-cog demo-animate-spin"></i> Please wait...');

		// Get the JSON file
		$.ajax({
			url: 'icomoon/selection.json',
			type: 'GET',
			dataType: 'json'
		})
		.done(function(response) {

			// Get the class prefix
			var classPrefix = response.preferences.fontPref.prefix,
				icomoon_json_icons = [],
				icomoon_json_search = [];

			// For each icon
			$.each(response.icons, function(i, v) {

				// Set the source
				icomoon_json_icons.push( classPrefix + v.properties.name );

				// Create and set the search source
				if ( v.icon && v.icon.tags && v.icon.tags.length ) {
					icomoon_json_search.push( v.properties.name + ' ' + v.icon.tags.join(' ') );
				} else {
					icomoon_json_search.push( v.properties.name );
				}
			});

			// Set new fonts on fontIconPicker
			e9_element.setIcons(icomoon_json_icons, icomoon_json_search);

			// Show success message and disable
			$('#e9_buttons button').removeClass('btn-primary').addClass('btn-success').text('Successfully loaded icons').prop('disabled', true);

		})
		.fail(function() {
			// Show error message and enable
			$('#e9_buttons button').removeClass('btn-primary').addClass('btn-danger').text('Error: Try Again?').prop('disabled', false);
		});
		e.stopPropagation();
	});
});

CHANGE event is triggered on the element on icon change so you'll be able to trigger custom action each time an icon get selected.

Selected Icon: Selected Icon: 
<input type="text" class="trigger_change" id="e10_element_1" name="e10_element_1" />
<span>Selected Icon: <span class="selected_icon text-danger"><i class="icon-block"></i></span></span>
<input type="text" class="trigger_change" id="e10_element_2" name="e10_element_2" />
<span>Selected Icon: <span class="selected_icon text-danger"><i class="icon-block"></i></span></span>
										

jQuery(document).ready(function($) {

	/**
	 * Example 10
	 * Trigger event on icon change
	 */

	// First icon picker with fontawesome
	$('#e10_element_1').fontIconPicker({
		theme: 'fip-darkgrey',
		source: fnt_icons_categorized
	}).on('change', function() {
		var nextSpan = $(this).next('span'),
		iconToChange = nextSpan.find('.selected_icon'),
		selectedIcon = $(this).val();
		if ( selectedIcon == '' ) {
			iconToChange.html('<i class="icon-block"></i>');
			iconToChange.removeClass('text-primary').addClass('text-danger');
		} else {
			iconToChange.html('<i class="' + selectedIcon + '"></i>');
			iconToChange.addClass('text-primary').removeClass('text-danger');
		}
	});

	// Second icon picker with icomoons and attributes
	$('#e10_element_2').fontIconPicker({
		theme: 'fip-bootstrap',
		source: icm_icons,
		searchSource: icm_icon_search,
		useAttribute: true,
		attributeName: 'data-icomoon'
	}).on('change', function() {
		var nextSpan = $(this).next('span'),
		iconToChange = nextSpan.find('.selected_icon'),
		selectedIcon = $(this).val();
		if ( selectedIcon == '' ) {
			iconToChange.html('<i class="icon-block"></i>');
			iconToChange.removeClass('text-primary').addClass('text-danger');
		} else {
			iconToChange.html('<i data-icomoon="&#x' + parseInt(selectedIcon, 10).toString(16) + ';"></i>');
			iconToChange.addClass('text-primary').removeClass('text-danger');
		}
	});

});

If you are changing the DOM content dynamically then you can call refreshPicker public method to get the new DOM items.

<button type="button" id="e11_element_helper_change" class="btn btn-primary pull-right">Change DOM</button>
<button type="button" style="display: none" id="e11_element_helper_restore" class="btn btn-default pull-right">Restore DOM</button>
<select name="e11_element" id="e11_element">
	<optgroup label="Web Applications">
		<option value="57436">Box add</option>
		<option value="57437">Box remove</option>
		<option value="57438">Download</option>
		<option value="57439">Upload</option>
		<option value="57524">List</option>
		<option value="57525">List 2</option>
		<option value="57526">Numbered list</option>
		<option value="57527">Menu</option>
		<option value="57528">Menu 2</option>
		<option value="57531">Cloud download</option>
		<option value="57532">Cloud upload</option>
		<option value="57533">Download 2</option>
		<option value="57534">Upload 2</option>
		<option value="57535">Download 3</option>
		<option value="57536">Upload 3</option>
		<option value="57537">Globe</option>
		<option value="57541">Attachment</option>
		<option value="57545">Bookmark</option>
		<option value="57691">Embed</option>
		<option value="57692">Code</option>
	</optgroup>
	<optgroup label="Business Icons">
		<option value="57347">Office</option>
		<option value="57348">Newspaper</option>
		<option value="57375">Book</option>
		<option value="57376">Books</option>
		<option value="57377">Library</option>
		<option value="57379">Profile</option>
		<option value="57403">Support</option>
		<option value="57406">Address book</option>
		<option value="57432">Cabinet</option>
		<option value="57433">Drawer</option>
		<option value="57434">Drawer 2</option>
		<option value="57435">Drawer 3</option>
		<option value="57450">Bubble</option>
		<option value="57453">Bubble 2</option>
		<option value="57456">User</option>
		<option value="57458">User 2</option>
		<option value="57460">User 3</option>
		<option value="57461">User 4</option>
		<option value="57463">Busy</option>
	</optgroup>
</select>
										
jQuery(document).ready(function($) {

	/**
	 * Example 11
	 * Refresh iconPicker on DOM change
	 */

	// Init fontIconPicker
	var e11_element = $('#e11_element').fontIconPicker({
		useAttribute: true,
		theme: 'fip-darkgrey',
		attributeName: 'data-icomoon',
		emptyIconValue: 'none'
	});

	// Get the original HTML for later use
	var e11_original_html = e11_element.html();

	// Add event listener to the change button
	$('#e11_element_helper_change').on('click', function() {

		// Change the item HTML
		var new_html = '<optgroup label="Form Control Icons">' +
			'<option value="57383">Copy</option>' +
			'<option value="57384">Copy 2</option>' +
			'<option value="57385">Copy 3</option>' +
			'<option value="57386">Paste</option>' +
			'<option value="57387">Paste 2</option>' +
			'<option value="57388">Paste 3</option>' +
			'<option value="57484">Settings</option>' +
			'<option value="57594">Cancel circle</option>' +
			'<option value="57595">Checkmark circle</option>' +
			'<option value="57600">Spell check</option>' +
			'<option value="57603">Enter</option>' +
			'<option value="57604">Exit</option>' +
			'<option value="57659">Radio checked</option>' +
			'<option value="57660">Radio unchecked</option>' +
			'<option value="57693">Console</option>' +
		'</optgroup>' +
		'<optgroup label="User Action & Text Editor">' +
			'<option value="57442">Undo</option>' +
			'<option value="57443">Redo</option>' +
			'<option value="57444">Flip</option>' +
			'<option value="57445">Flip 2</option>' +
			'<option value="57446">Undo 2</option>' +
			'<option value="57447">Redo 2</option>' +
			'<option value="57472">Zoomin</option>' +
			'<option value="57473">Zoomout</option>' +
			'<option value="57474">Expand</option>' +
			'<option value="57475">Contract</option>' +
			'<option value="57476">Expand 2</option>' +
			'<option value="57477">Contract 2</option>' +
			'<option value="57539">Link</option>' +
			'<option value="57662">Scissors</option>' +
			'<option value="57668">Bold</option>' +
			'<option value="57669">Underline</option>' +
			'<option value="57670">Italic</option>' +
			'<option value="57671">Strikethrough</option>' +
			'<option value="57674">Table</option>' +
			'<option value="57675">Table 2</option>' +
			'<option value="57688">Indent increase</option>' +
			'<option value="57689">Indent decrease</option>' +
		'</optgroup>';
		e11_element.html(new_html);

		// Refresh the iconPicker
		e11_element.refreshPicker();

		// Hide this element
		$(this).hide();

		// Show the restore button
		$('#e11_element_helper_restore').fadeIn('fast');
	});

	// Add event listener to the restore button
	$('#e11_element_helper_restore').on('click', function() {

		// Restore the original HTML
		e11_element.html(e11_original_html);

		// Refresh the iconPicker
		e11_element.refreshPicker();

		// Hide this button
		$(this).hide();

		// Show the change button
		$('#e11_element_helper_change').fadeIn('fast');

	});
});

fontIconPicker works with most (if not all) form validators. fontIconPicker does not remove or hide the original element, rather puts it behind the icon picker. So validation engines will not have any difficulty finding the original element or putting tooltips near it. The demo below shows form validation with

Sample Form 
<form action="" method="POST" role="form" class="form-horizontal" id="e12_form">
	<legend>Sample Form</legend>

	<div class="form-group">
		<label class="col-md-4" for="e12_f_name">Full Name</label>
		<div class="col-md-4">
			<input data-bv-notempty="true" data-bv-notempty-message="You must enter a first name" type="text" class="form-control" id="e12_f_name" name="e12_f_name" placeholder="First Name" />
		</div>
		<div class="col-md-4">
			<input data-bv-notempty="true" data-bv-notempty-message="You must enter a last name" type="text" class="form-control" id="e12_l_name" name="e12_l_name" placeholder="Last Name" />
		</div>
	</div>

	<div class="form-group">
		<label for="e12_picker_1" class="col-md-4">Pick a Fontello Font</label>
		<div class="col-md-8">
			<input data-bv-notempty="true" data-bv-notempty-message="You must pick a font" type="text" class="form-control" id="e12_picker_1" name="e12_picker_1" placeholder="Fontello" />
		</div>
	</div>

	<div class="form-group">
		<label for="e12_picker_2" class="col-md-4">Pick an IcoMoon Font</label>
		<div class="col-md-8">
			<input data-bv-notempty="true" data-bv-notempty-message="You must pick a font" type="text" class="form-control" id="e12_picker_2" name="e12_picker_2" placeholder="IcoMoon" />
		</div>
	</div>

	<button type="submit" class="btn btn-primary">Validate</button>
</form>
										
jQuery(document).ready(function($) {

	/**
	 * Example 12
	 * Form Validation with validator engines
	 *
	 * bootstrapValidator must be included
	 * @link: http://bootstrapvalidator.com/
	 */

	// Init fontIconPicker 1
	$('#e12_picker_1').fontIconPicker({
		source: fnt_icons_categorized,
		theme: 'fip-bootstrap'
	});

	// Init fontIconPicker 2
	$('#e12_picker_2').fontIconPicker({
		source: icm_icons,
		searchSource: icm_icon_search,
		useAttribute: true,
		attributeName: 'data-icomoon',
		theme: 'fip-bootstrap'
	});

	// bootstrapValidator init
	// Works out of the box, no need to change any configurations
	$('#e12_form').bootstrapValidator({
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		submitHandler: function(validator, form, submitButton) {
			alert('Validated');
		}
	});
});

With the new iconGenerator option you can use anything to render things inside the picker. Like SVG.

Live View

Please Select…

We also need to append the SVG source somewhere in the document, preferably before closing <body> tag.

The following SVG is downloaded from Kameleon and bundled with svg-join.

Select an SVG below to see the content change.

<div id="rendered-svg" class="thumbnail" style="max-width: 350px;">
	<img src="lib/svgs/placeholder.png" alt="Live View" style="width: 100%; background: #ddd; padding: 20px;">
	<div class="caption">
		<h3>Please Select…</h3>
		<p>We also need to append the SVG source somewhere in the document, preferably before closing <code>&lt;body&gt;</code> tag.</p>
		<p>The following SVG is downloaded from <a href="http://www.kameleon.pics/">Kameleon</a> and bundled with <a href="https://www.npmjs.com/package/svg-join">svg-join</a>.</p>
		<p>Select an SVG below to see the content change.</p>
		<input type="text" id="svg_renderer" value="" />
	</div>
</div>
										
var svgs = [ 'Baby-Mobile', 'Bag-Present', 'Application-Map', 'Batman',
	'Battery-Charging', 'Beach', 'Bell', 'Bonsai', 'Boss-2', 'Boss-3',
	'Boss-5', 'Burglar', 'Bus', 'Businesswoman-1', 'Camera-Front',
	'Candles', 'Canoe', 'Captain-Shield', 'Candy', 'Cement-Mixer',
	'Car-Jumper', 'Checklist', 'Cheese', 'Cashier-2', 'Chair-4', 'Chat-2' ];
$( '#svg_renderer' ).fontIconPicker({
	source: svgs,
	theme: 'fip-bootstrap',
	iconGenerator: function( item, flipBoxTitle, index ) {
		return '<i style="display: flex; align-items: center; justify-content: center; height: 100%;"><svg style="height: 32px; width: auto;" class="svg-icon ' + item + '"><use xlink:href="#' + item + '"></use></svg></i>';
	}
})
	.on( 'change', function() {
		var item = $( this ).val(),
		liveView = $( '#rendered-svg' ),
		liveTitle = liveView.find( 'h3' ),
		liveImage = liveView.find( 'img' );
		if ( '' === item ) {
			liveTitle.html( 'Please Select…' );
			liveImage.attr( 'src', 'lib/svgs/placeholder.png' );
			return;
		}
		liveTitle.html( item.split( '-' ).join( ' ' ) );
		liveImage.attr( 'src', 'lib/svgs/parts/' + item + '.svg' );
	} );

We also need to append the SVG source somewhere in the document, preferably before closing <body> tag.

The SVG is downloaded from Kameleon and bundled with svg-join.

You can find it here.

The example uses a settings json from here.

<input type="text" id="e14_element" name="e14_element" />
<span id="e14_buttons">
	<button autocomplete="off" type="button" class="btn btn-primary">Load from FontAwesome</button>
</span>
										
// Add the event on the button
$( '#e14_buttons button' ).on( 'click', function( e ) {
	// Append the fontawesome CDN
	if ( ! $( '#fontawesome-cdn' ).length ) {
		$('head').append( '<link id="fontawesome-cdn" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">' );
	}
	// Prevent default
	e.preventDefault();
	// Show processing message
	$( this ).prop( 'disabled', true )
		.html( '<i class="icon-cog demo-animate-spin"></i> Please wait…' );
	// Get the JSON file
	$.ajax( {
		url: 'https://gist.githubusercontent.com/swashata/c0db916b33700c91ab75f59d4aeba7d3/raw/366789b2d001a99f5f41f1ceab980d991de059c3/fontawesome-icons-with-categories.json',
		type: 'GET',
		dataType: 'json'
	} )
	.done( function( response ) {
		console.log( response );
		setTimeout( function() {
			// Reset icons
			e14_element.setIcons( response );

			// Show success message and disable
			$( '#e14_buttons button' )
				.removeClass( 'btn-primary' )
				.addClass( 'btn-success' )
				.text( 'Successfully loaded icons' )
				.prop( 'disabled', true );
		}, 1000 );
	} )
	.fail( function() {
		// Show error message and enable
		$( '#e14_buttons button' )
			.removeClass( 'btn-primary' )
			.addClass( 'btn-danger' )
			.text( 'Error: Try Again?' )
			.prop( 'disabled', false );
	} );
	e.stopPropagation();
} );

Variable Definitions

Sevaral variables are used in the above examples, which are defined as follows.

var icm_icons = {
	'Web Applications' : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	'Business Icons' : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	'eCommerce' : [57392, 57397, 57398, 57399, 57402],
	'Currency Icons' : [],
	'Form Control Icons' : [57383, 57384, 57385, 57386, 57387, 57388, 57484, 57594, 57595, 57600, 57603, 57604, 57659, 57660, 57693],
	'User Action & Text Editor' : [57442, 57443, 57444, 57445, 57446, 57447, 57472, 57473, 57474, 57475, 57476, 57477, 57539, 57662, 57668, 57669, 57670, 57671, 57674, 57675, 57688, 57689],
	'Charts and Codes' : [57493],
	'Attentive' : [57543, 57588, 57590, 57591, 57592, 57593, 57596],
	'Multimedia Icons' : [57356, 57357, 57362, 57363, 57448, 57485, 57547, 57548, 57549, 57605, 57606, 57609, 57610, 57611, 57614, 57617, 57618, 57620, 57621, 57622, 57623, 57624, 57625, 57626],
	'Location and Contact' : [57344, 57345, 57346, 57404, 57405, 57408, 57410, 57411, 57413, 57414, 57540],
	'Date and Time' : [57415, 57416, 57417, 57421, 57422, 57423],
	'Devices' : [57359, 57361, 57364, 57425, 57426, 57430],
	'Tools' : [57349, 57350, 57352, 57355, 57365, 57478, 57479, 57480, 57481, 57482, 57483, 57486, 57487, 57488, 57663, 57664],
	'Social and Networking' : [57694, 57700, 57701, 57702, 57703, 57704, 57705, 57706, 57707, 57709, 57710, 57711, 57717, 57718, 57719, 57736, 57737, 57738, 57739, 57740, 57741, 57742, 57746, 57747, 57748, 57755, 57756, 57758, 57759, 57760, 57761, 57763, 57764, 57765, 57766, 57767, 57776],
	'Brands' : [57743, 57750, 57751, 57752, 57753, 57754, 57757, 57773, 57774, 57775, 57789, 57790, 57792, 57793],
	'Files & Documents' : [57378, 57380, 57381, 57382, 57390, 57391, 57778, 57779, 57780, 57781, 57782, 57783, 57784, 57785, 57786, 57787],
	'Like & Dislike Icons' : [57542, 57544, 57550, 57551, 57552, 57553, 57554, 57555, 57556, 57557],
	'Emoticons' : [57558, 57559, 57560, 57561, 57562, 57563, 57564, 57565, 57566, 57567, 57568, 57569, 57570, 57571, 57572, 57573, 57574, 57575, 57576, 57577, 57578, 57579, 57580, 57581, 57582, 57583],
	'Directional Icons' : [57584, 57585, 57586, 57587, 57631, 57632, 57633, 57634, 57635, 57636, 57637, 57638, 57639, 57640, 57641, 57642, 57643, 57644, 57645, 57646, 57647, 57648, 57649, 57650, 57651, 57652, 57653, 57654],
	'Other Icons' : [57351, 57353, 57354, 57358, 57360, 57366, 57367, 57368, 57369, 57370, 57371, 57372, 57373, 57374, 57389, 57393, 57394, 57395, 57396, 57400, 57401, 57407, 57409, 57412, 57418, 57419, 57420, 57424, 57427, 57428, 57429, 57431, 57440, 57441, 57449, 57451, 57452, 57454, 57455, 57457, 57459, 57462, 57464, 57465, 57466, 57467, 57468, 57469, 57470, 57471, 57489, 57490, 57491, 57492, 57494, 57495, 57496, 57497, 57498, 57499, 57500, 57501, 57502, 57503, 57504, 57505, 57506, 57507, 57508, 57509, 57510, 57511, 57512, 57513, 57514, 57515, 57516, 57517, 57518, 57519, 57520, 57521, 57522, 57523, 57529, 57530, 57538, 57546, 57589, 57597, 57598, 57599, 57601, 57602, 57607, 57608, 57612, 57613, 57615, 57616, 57619, 57627, 57628, 57629, 57630, 57655, 57656, 57657, 57658, 57661, 57665, 57666, 57667, 57672, 57673, 57676, 57677, 57678, 57679, 57680, 57681, 57682, 57683, 57684, 57685, 57686, 57687, 57690, 57695, 57696, 57697, 57698, 57699, 57708, 57712, 57713, 57714, 57715, 57716, 57720, 57721, 57722, 57723, 57724, 57725, 57726, 57727, 57728, 57729, 57730, 57731, 57732, 57733, 57734, 57735, 57744, 57745, 57749, 57762, 57768, 57769, 57770, 57771, 57772, 57777, 57788, 57791, 57794]
};

var icm_icon_search = {
	'Web Applications' : ['Box add', 'Box remove', 'Download', 'Upload', 'List', 'List 2', 'Numbered list', 'Menu', 'Menu 2', 'Cloud download', 'Cloud upload', 'Download 2', 'Upload 2', 'Download 3', 'Upload 3', 'Globe', 'Attachment', 'Bookmark', 'Embed', 'Code'],
	'Business Icons' : ['Office', 'Newspaper', 'Book', 'Books', 'Library', 'Profile', 'Support', 'Address book', 'Cabinet', 'Drawer', 'Drawer 2', 'Drawer 3', 'Bubble', 'Bubble 2', 'User', 'User 2', 'User 3', 'User 4', 'Busy'],
	'eCommerce' : ['Tag', 'Cart', 'Cart 2', 'Cart 3', 'Calculate'],
	'Currency Icons' : [],
	'Form Control Icons' : ['Copy', 'Copy 2', 'Copy 3', 'Paste', 'Paste 2', 'Paste 3', 'Settings', 'Cancel circle', 'Checkmark circle', 'Spell check', 'Enter', 'Exit', 'Radio checked', 'Radio unchecked', 'Console'],
	'User Action & Text Editor' : ['Undo', 'Redo', 'Flip', 'Flip 2', 'Undo 2', 'Redo 2', 'Zoomin', 'Zoomout', 'Expand', 'Contract', 'Expand 2', 'Contract 2', 'Link', 'Scissors', 'Bold', 'Underline', 'Italic', 'Strikethrough', 'Table', 'Table 2', 'Indent increase', 'Indent decrease'],
	'Charts and Codes' : ['Pie'],
	'Attentive' : ['Eye blocked', 'Warning', 'Question', 'Info', 'Info 2', 'Blocked', 'Spam'],
	'Multimedia Icons' : ['Image', 'Image 2', 'Play', 'Film', 'Forward', 'Equalizer', 'Brightness medium', 'Brightness contrast', 'Contrast', 'Play 2', 'Pause', 'Forward 2', 'Play 3', 'Pause 2', 'Forward 3', 'Previous', 'Next', 'Volume high', 'Volume medium', 'Volume low', 'Volume mute', 'Volume mute 2', 'Volume increase', 'Volume decrease'],
	'Location and Contact' : ['Home', 'Home 2', 'Home 3', 'Phone', 'Phone hang up', 'Envelope', 'Location', 'Location 2', 'Map', 'Map 2', 'Flag'],
	'Date and Time' : ['History', 'Clock', 'Clock 2', 'Stopwatch', 'Calendar', 'Calendar 2'],
	'Devices' : ['Camera', 'Headphones', 'Camera 2', 'Keyboard', 'Screen', 'Tablet'],
	'Tools' : ['Pencil', 'Pencil 2', 'Pen', 'Paint format', 'Dice', 'Key', 'Key 2', 'Lock', 'Lock 2', 'Unlocked', 'Wrench', 'Cog', 'Cogs', 'Cog 2', 'Filter', 'Filter 2'],
	'Social and Networking' : ['Share', 'Googleplus', 'Googleplus 2', 'Googleplus 3', 'Googleplus 4', 'Google drive', 'Facebook', 'Facebook 2', 'Facebook 3', 'Twitter', 'Twitter 2', 'Twitter 3', 'Vimeo', 'Vimeo 2', 'Vimeo 3', 'Github', 'Github 2', 'Github 3', 'Github 4', 'Github 5', 'Wordpress', 'Wordpress 2', 'Tumblr', 'Tumblr 2', 'Yahoo', 'Soundcloud', 'Soundcloud 2', 'Reddit', 'Linkedin', 'Lastfm', 'Lastfm 2', 'Stumbleupon', 'Stumbleupon 2', 'Stackoverflow', 'Pinterest', 'Pinterest 2', 'Yelp'],
	'Brands' : ['Joomla', 'Apple', 'Finder', 'Android', 'Windows', 'Windows 8', 'Skype', 'Paypal', 'Paypal 2', 'Paypal 3', 'Chrome', 'Firefox', 'Opera', 'Safari'],
	'Files & Documents' : ['File', 'File 2', 'File 3', 'File 4', 'Folder', 'Folder open', 'File pdf', 'File openoffice', 'File word', 'File excel', 'File zip', 'File powerpoint', 'File xml', 'File css', 'Html 5', 'Html 52'],
	'Like & Dislike Icons' : ['Eye', 'Eye 2', 'Star', 'Star 2', 'Star 3', 'Heart', 'Heart 2', 'Heart broken', 'Thumbs up', 'Thumbs up 2'],
	'Emoticons' : ['Happy', 'Happy 2', 'Smiley', 'Smiley 2', 'Tongue', 'Tongue 2', 'Sad', 'Sad 2', 'Wink', 'Wink 2', 'Grin', 'Grin 2', 'Cool', 'Cool 2', 'Angry', 'Angry 2', 'Evil', 'Evil 2', 'Shocked', 'Shocked 2', 'Confused', 'Confused 2', 'Neutral', 'Neutral 2', 'Wondering', 'Wondering 2'],
	'Directional Icons' : ['Point up', 'Point right', 'Point down', 'Point left', 'Arrow up left', 'Arrow up', 'Arrow up right', 'Arrow right', 'Arrow down right', 'Arrow down', 'Arrow down left', 'Arrow left', 'Arrow up left 2', 'Arrow up 2', 'Arrow up right 2', 'Arrow right 2', 'Arrow down right 2', 'Arrow down 2', 'Arrow down left 2', 'Arrow left 2', 'Arrow up left 3', 'Arrow up 3', 'Arrow up right 3', 'Arrow right 3', 'Arrow down right 3', 'Arrow down 3', 'Arrow down left 3', 'Arrow left 3'],
	'Other Icons' : ['Quill', 'Blog', 'Droplet', 'Images', 'Music', 'Pacman', 'Spades', 'Clubs', 'Diamonds', 'Pawn', 'Bullhorn', 'Connection', 'Podcast', 'Feed', 'Stack', 'Tags', 'Barcode', 'Qrcode', 'Ticket', 'Coin', 'Credit', 'Notebook', 'Pushpin', 'Compass', 'Alarm', 'Alarm 2', 'Bell', 'Print', 'Laptop', 'Mobile', 'Mobile 2', 'Tv', 'Disk', 'Storage', 'Reply', 'Bubbles', 'Bubbles 2', 'Bubbles 3', 'Bubbles 4', 'Users', 'Users 2', 'Quotes left', 'Spinner', 'Spinner 2', 'Spinner 3', 'Spinner 4', 'Spinner 5', 'Spinner 6', 'Binoculars', 'Search', 'Hammer', 'Wand', 'Aid', 'Bug', 'Stats', 'Bars', 'Bars 2', 'Gift', 'Trophy', 'Glass', 'Mug', 'Food', 'Leaf', 'Rocket', 'Meter', 'Meter 2', 'Dashboard', 'Hammer 2', 'Fire', 'Lab', 'Magnet', 'Remove', 'Remove 2', 'Briefcase', 'Airplane', 'Truck', 'Road', 'Accessibility', 'Target', 'Shield', 'Lightning', 'Switch', 'Powercord', 'Signup', 'Tree', 'Cloud', 'Earth', 'Bookmarks', 'Notification', 'Close', 'Checkmark', 'Checkmark 2', 'Minus', 'Plus', 'Stop', 'Backward', 'Stop 2', 'Backward 2', 'First', 'Last', 'Eject', 'Loop', 'Loop 2', 'Loop 3', 'Shuffle', 'Tab', 'Checkbox checked', 'Checkbox unchecked', 'Checkbox partial', 'Crop', 'Font', 'Text height', 'Text width', 'Omega', 'Sigma', 'Insert template', 'Pilcrow', 'Lefttoright', 'Righttoleft', 'Paragraph left', 'Paragraph center', 'Paragraph right', 'Paragraph justify', 'Paragraph left 2', 'Paragraph center 2', 'Paragraph right 2', 'Paragraph justify 2', 'Newtab', 'Mail', 'Mail 2', 'Mail 3', 'Mail 4', 'Google', 'Instagram', 'Feed 2', 'Feed 3', 'Feed 4', 'Youtube', 'Youtube 2', 'Lanyrd', 'Flickr', 'Flickr 2', 'Flickr 3', 'Flickr 4', 'Picassa', 'Picassa 2', 'Dribbble', 'Dribbble 2', 'Dribbble 3', 'Forrst', 'Forrst 2', 'Deviantart', 'Deviantart 2', 'Steam', 'Steam 2', 'Blogger', 'Blogger 2', 'Tux', 'Delicious', 'Xing', 'Xing 2', 'Flattr', 'Foursquare', 'Foursquare 2', 'Libreoffice', 'Css 3', 'IE', 'IcoMoon']
};

var icm_icons_1 = {
	'Web Applications' : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	'Business Icons' : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	'eCommerce' : [57392, 57397, 57398, 57399, 57402]
};
var icm_icon_search_1 = {
	'Web Applications' : ['Box add', 'Box remove', 'Download', 'Upload', 'List', 'List 2', 'Numbered list', 'Menu', 'Menu 2', 'Cloud download', 'Cloud upload', 'Download 2', 'Upload 2', 'Download 3', 'Upload 3', 'Globe', 'Attachment', 'Bookmark', 'Embed', 'Code'],
	'Business Icons' : ['Office', 'Newspaper', 'Book', 'Books', 'Library', 'Profile', 'Support', 'Address book', 'Cabinet', 'Drawer', 'Drawer 2', 'Drawer 3', 'Bubble', 'Bubble 2', 'User', 'User 2', 'User 3', 'User 4', 'Busy'],
	'eCommerce' : ['Tag', 'Cart', 'Cart 2', 'Cart 3', 'Calculate']
};

var icm_icons_2 = {
	'Multimedia Icons' : [57356, 57357, 57362, 57363, 57448, 57485, 57547, 57548, 57549, 57605, 57606, 57609, 57610, 57611, 57614, 57617, 57618, 57620, 57621, 57622, 57623, 57624, 57625, 57626],
	'Location and Contact' : [57344, 57345, 57346, 57404, 57405, 57408, 57410, 57411, 57413, 57414, 57540],
	'Date and Time' : [57415, 57416, 57417, 57421, 57422, 57423],
	'Devices' : [57359, 57361, 57364, 57425, 57426, 57430]
};
var icm_icon_search_2 = {
	'Multimedia Icons' : ['Image', 'Image 2', 'Play', 'Film', 'Forward', 'Equalizer', 'Brightness medium', 'Brightness contrast', 'Contrast', 'Play 2', 'Pause', 'Forward 2', 'Play 3', 'Pause 2', 'Forward 3', 'Previous', 'Next', 'Volume high', 'Volume medium', 'Volume low', 'Volume mute', 'Volume mute 2', 'Volume increase', 'Volume decrease'],
	'Location and Contact' : ['Home', 'Home 2', 'Home 3', 'Phone', 'Phone hang up', 'Envelope', 'Location', 'Location 2', 'Map', 'Map 2', 'Flag'],
	'Date and Time' : ['History', 'Clock', 'Clock 2', 'Stopwatch', 'Calendar', 'Calendar 2'],
	'Devices' : ['Camera', 'Headphones', 'Camera 2', 'Keyboard', 'Screen', 'Tablet'],
};

var icm_icons_3 = [57542, 57544, 57550, 57551, 57552, 57553, 57554, 57555, 57556, 57557];
var icm_icon_search_3 = ['Eye', 'Eye 2', 'Star', 'Star 2', 'Star 3', 'Heart', 'Heart 2', 'Heart broken', 'Thumbs up', 'Thumbs up 2'];

var fnt_icons = ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-comment-empty", "icon-chat-empty", "icon-bell", "icon-bell-alt"];

var fnt_icons_categorized = {
	'Web Application Icons' : ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"],
	'Form Control Icons' : ["icon-search", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-quote-right", "icon-code", "icon-comment-empty", "icon-chat-empty"],
	'Media Icons' : ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"],
	'Popular Icons' : ["icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-forward", "icon-quote-left", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat"],
	'Others' : ["icon-music", "icon-help", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-bell", "icon-bell-alt"]
};

var fnt_icons_1 = ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"];
var fnt_icons_2 = ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"];

Plugin Configuration Options

You can pass the following options to the fontIconPicker constructor.

Option Datatype Description Default Example
theme String The theme to be used with the fontIconPicker. Available values are:
  • fip-grey: The default theme. Renders beautiful grey colored icon picker.
  • fip-darkgrey: A deeper shade of the grey theme with CSS3 gradients, rounded corners and shadows.
  • fip-bootstrap: A nice icon picker theme compatible with Bootstrap.
  • fip-inverted: Inverted color scheme.
'fip-grey' 
$('#icomoon').fontIconPicker({
	theme: 'fip-darkgrey'
});
source Array | Object | Boolean The source of icons. Can be of two types:
  • Array: For simple list of icons without any categorizing.
  • Object: For categorized list of icons. Each of the object variables should be an array consisting of icons under that category. Object variable name is used to populate that category.
false

Simple list of icons, chained with other options

// init fontIconPicker
$('.myselect').fontIconPicker({
	source: ['icon-heart', 'icon-lemon', 'icon-user', 'icon-tag', 'icon-help'],
	emptyIcon: false,
	hasSearch: false
});

Categorized list of icons

var icm_icons = {
	'Web Applications' : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	'Business Icons' : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	'eCommerce' : [57392, 57397, 57398, 57399, 57402],
	'Currency Icons' : [],
	'Form Control Icons' : [57383, 57384, 57385, 57386, 57387, 57388, 57484, 57594, 57595, 57600, 57603, 57604, 57659, 57660, 57693],
	'User Action & Text Editor' : [57442, 57443, 57444, 57445, 57446, 57447, 57472, 57473, 57474, 57475, 57476, 57477, 57539, 57662, 57668, 57669, 57670, 57671, 57674, 57675, 57688, 57689],
	'Charts and Codes' : [57493],
	'Attentive' : [57543, 57588, 57590, 57591, 57592, 57593, 57596]
};
$('.myselect').fontIconPicker({
	source: icm_icons,
	useAttribute: true,
	attributeName: 'data-icomoon'
});
emptyIcon Boolean Whether or not empty icon should be shown on the icon picker. If you give your users the option to pick no icon, then leave it enabled. true 
$('.myselect').fontIconPicker({
	emptyIcon: false
});
emptyIconValue String What should be the value of the INPUT or SELECT field when no icon is selected. This is only used when emptyIcon is set to true. ''
(empty string)		 
// Use the value "none" when no icon is selected
$('.myselect').fontIconPicker({
	emptyIconValue: 'none'
});
autoClose Boolean Whether or not to close the icon picker automatically when clicked elsewhere. true

Clicking outside will not close ‐ 

$('.myselect').fontIconPicker({
	autoClose: false
});
iconsPerPage Number Number of icons per page on the icon picker. Please note that if you have emptyIcon set to true then the actual number will be one less. For better appearance always provide a number in multiple of 5. 20 
// Show 50 icons per page
$('.myselect').fontIconPicker({
	iconsPerPage: 50
});
iconGenerator Function

A custom generator function for rendering the icon list inside the dropdown box and the selected icon box. The following parameters are supported in the given order.

  1. icon - string : The value of the icon as found from the source.
 null 
$('.myselect').fontIconPicker({
	iconGenerator: function( icon ) {
		source: [ 'address-book', 'adjust', 'bus' ]
		return '';
	}
})
hasSearch Boolean Whether or not to show the search bar. The search result is always non case sensitive. When the fontIconPicker is initiated on a SELECT element, the option labels (or HTML) are used for search, not the option values. true 
// Do not show the search bar
$('.myselect').fontIconPicker({
	hasSearch: false
});
searchPlaceholder String Placeholder for the search input 'Search Icons' 
$('.myselect').fontIconPicker({
	searchPlaceholder: 'Search fontAwesome Icons'
});
searchSource Array | Object | Boolean Provide additional search strings for icons. Should be of the same format and order as the source option. This is particularly useful when passing numeric values to be used as Unicode HTML attribute to the source. You can then provide this additional option to pass a custom search string.
If provided, this will also be used to populate the titles of the icons.		 false 
// Categorized Icon Source
var icm_icons = {
	'Web Applications' : [57436, 57437, 57438, 57439, 57524, 57525, 57526, 57527, 57528, 57531, 57532, 57533, 57534, 57535, 57536, 57537, 57541, 57545, 57691, 57692],
	'Business Icons' : [57347, 57348, 57375, 57376, 57377, 57379, 57403, 57406, 57432, 57433, 57434, 57435, 57450, 57453, 57456, 57458, 57460, 57461, 57463],
	'eCommerce' : [57392, 57397, 57398, 57399, 57402],
	'Form Control Icons' : [57383, 57384, 57385, 57386, 57387, 57388, 57484, 57594, 57595, 57600, 57603, 57604, 57659, 57660, 57693]
};

// Categorized Search source
// Under the same order as the source itself
var icm_icon_search = {
	'Web Applications' : ['Box add', 'Box remove', 'Download', 'Upload', 'List', 'List 2', 'Numbered list', 'Menu', 'Menu 2', 'Cloud download', 'Cloud upload', 'Download 2', 'Upload 2', 'Download 3', 'Upload 3', 'Globe', 'Attachment', 'Bookmark', 'Embed', 'Code'],
	'Business Icons' : ['Office', 'Newspaper', 'Book', 'Books', 'Library', 'Profile', 'Support', 'Address book', 'Cabinet', 'Drawer', 'Drawer 2', 'Drawer 3', 'Bubble', 'Bubble 2', 'User', 'User 2', 'User 3', 'User 4', 'Busy'],
	'eCommerce' : ['Tag', 'Cart', 'Cart 2', 'Cart 3', 'Calculate'],
	'Form Control Icons' : ['Copy', 'Copy 2', 'Copy 3', 'Paste', 'Paste 2', 'Paste 3', 'Settings', 'Cancel circle', 'Checkmark circle', 'Spell check', 'Enter', 'Exit', 'Radio checked', 'Radio unchecked', 'Console']
};
// Init the icon picker with custom source and search
$('.myselect').fontIconPicker({
	source: icm_icons,
	searchSource: icm_icon_search,
	useAttribute: true,
	attributeName: 'data-icomoon'
});
appendTo String | jQuery Object Where to append the icon picker popup. By default it is appended right after the icon picker toggle button. But if you are nesting under a relative positioned container, then you'd like to append to it's parent or body. The option accpets string selector or jQuery object. Use the value self to append to original position. 'self'

Notice how the second fontIconPicker will react because it is nested inside a position relative container.

$('#main') ‐ ‐ 'self' ‐

HTML

<div style="position: relative; height: 50px; overflow: hidden;">
	<!-- Append to #main -->
	<input type="text" name="option_appendto" id="option_appendto" />
	<!-- Append to self -->
	<input type="text" name="option_noppendto" id="option_noappendto" />
</div>

JavaScript

jQuery(document).ready(function($) {
	// Append To #main
	$('#option_appendto').fontIconPicker({
		source: icm_icons,
		searchSource: icm_icon_search,
		theme: 'fip-bootstrap',
		useAttribute: true,
		attributeName: 'data-icomoon',
		appendTo: $('#main') // Or simply pass 'body'
	});

	// Append To Self
	$('#option_noappendto').fontIconPicker({
		source: icm_icons,
		searchSource: icm_icon_search,
		theme: 'fip-bootstrap',
		useAttribute: true,
		attributeName: 'data-icomoon',
		appendTo: 'self' // This is the default value, so you can ignore it.
	});
});
useAttribute Boolean Whether to use attribute selector instead of class selector for printing icons inside the picker. For example the HTML code <i data-icomoon="&#xe1c2;"></i> will print this icon: . Under such circumstances you will either pass numeric hexadecimal or decimal numbers to the source object and set the convertToHex option to true or pass the whole unicode string &#xe1c2;. 'data-icon' 
$('.myselect').fontIconPicker({
	source: [57392, 57397, 57398, 57399, 57402],
	searchSource: ['Tag', 'Cart', 'Cart 2', 'Cart 3', 'Calculate']
	useAttribute: true,
	attributeName: 'data-icomoon'
});
attributeName String The name of the HTML attribute where the Unicode is to be put. This is ignored if useAttribute is set to false. 'data-icon' Please see useAttribute
convertToHex Boolean Whether to convert the source to hexadecimal string and thereby put the Unicode character to the provided HTML attribute. If set to false, then you need to provide the Unicode character directly in escaped format (eg &#xe1c2;). For ease of usage, it is best to pass direct decimal or hexadecimal number data to the source. This is ignored if useAttribute is set to false. true 
<!-- input field -->
<input type="text" id="no_hexadecimal" name="no_hexadecimal" />
<!-- init the icon picker -->
<script type="text/javascript">
	$('#no_hexadecimal').fontIconPicker({
		source: ['&#xe1b1;', '&#xe1b2;', '&#xe1b3;', '&#xe1b4;', '&#xe1b5;', '&#xe1b6;', '&#xe1b7;', '&#xe1b8;', '&#xe1b9;', '&#xe1ba;'],
		searchSource: ['Libre Office', 'File PDF', 'File Open Office', 'File Word', 'File Excel', 'File ZIP', 'File PowerPoint', 'File XML', 'File CSS', 'HTML 5'],
		useAttribute: true,
		attributeName: 'data-icomoon',
		convertToHex: false,
		theme: 'fip-bootstrap'
	});
</script>
allCategoryText String If categorized then use this option to modify the From all categories option of the category dropdown. 'From all categories' 
$('.myselect').fontIconPicker({
	useAttribute: true,
	attributeName: 'data-icomoon',
	allCategoryText: 'Show all'
});
unCategorizedText String In case of SELECT fields with OPTGROUP any OPTION which is not a child of some OPTGROUP are considered under the Uncategorized category. You can change the label of this pseudo category using this option. 'Uncategorized' 
$('.myselect').fontIconPicker({
	useAttribute: true,
	attributeName: 'data-icomoon',
	unCategorizedText: 'Default Icons'
});
windowDebounceDelay Number When resizing window, the dropdown position is automatically fixed but after a certain time. Mention the time in milliseconds. 150 
$('.myselect').fontIconPicker({
	windowDebounceDelay: 10 // almost immediate repositioning
});

Plugin APIs

fontIconPicker provides three public APIs to manipulating the icon picker.

API Parameters Description Example
setIcon newIcon
String
The value of the new icon to set. 		Use this to programmatically set a new selected icon. You should only use this when changing the selected icon. The original DOM element will also be updated and change and input events will be triggered.

Live

- Current:

HTML

<input type="text" name="set-icon" id="set-icon" /> - Current: <strong id="current-set-icon"><i class="icomoon-blocked"></i></strong>
<br /><br />
<span class="set-icons-buttons">
	<button type="button" class="btn btn-default set-icons-4" data-icon-value="">Reset</button>
	<button type="button" class="btn btn-default set-icons-1" data-icon-value="57484"><i data-icomoon="&#xe08c;"></i></button>
	<button type="button" class="btn btn-default set-icons-2" data-icon-value="57600"><i data-icomoon="&#xe100;"></i></button>
	<button type="button" class="btn btn-default set-icons-3" data-icon-value="57693"><i data-icomoon="&#xe15d;"></i></button>
</span>

JS

// Set selected icon
var setSelectedIcon = $( '#set-icon' ).fontIconPicker({
	source: icm_icons,
	searchSource: icm_icon_search,
	useAttribute: true,
	attributeName: 'data-icomoon',
	theme: 'fip-bootstrap'
})
	.on( 'change', function() {
		var setIcon = $( this ).val(),
		icon;
		if ( '' === setIcon ) {
			icon = '<i class="icomoon-blocked"></i>'
		} else {
			icon = '<i data-icomoon="&#x' + parseInt( setIcon, 10 ).toString( 16 ) + ';"></i>';
		}
		$('#current-set-icon').html( icon );
	} );

$('.set-icons-buttons').on( 'click', '.btn', function( e ) {
	var newIcon = $(this).data( 'iconValue' );
	setSelectedIcon.setIcon( newIcon );
} );
setIcons newIcons
Array | Object
An array or object of new icons. The format is same as source option. 		Use this method to dynamically change icons on the fly.

Live

HTML

<input type="text" name="change-icons" id="change-icons" />
<span class="change-icons-buttons">
	<button type="button" class="btn btn-primary change-icons-all">All Icons</button>
	<button type="button" class="btn btn-default change-icons-1">Set 1</button>
	<button type="button" class="btn btn-default change-icons-2">Set 2</button>
	<button type="button" class="btn btn-default change-icons-3">Set 3</button>
</span>

JS

/**
 * Dynamically set icons
 *
 */
// Get the variable to use the public APIs
var dynamicIconsElement = $('#change-icons').fontIconPicker({
	source: icm_icons,
	searchSource: icm_icon_search,
	useAttribute: true,
	attributeName: 'data-icomoon',
	theme: 'fip-bootstrap'
});

// Add the event listeners and change icons dynamically
$('.change-icons-all').on('click', function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons, icm_icon_search);

	// Change the button appearance
	$('.change-icons-buttons button').removeClass('btn-primary').addClass('btn-default');
	$(this).removeClass('btn-default').addClass('btn-primary');
});
$('.change-icons-1').on('click', function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons_1, icm_icon_search_1);

	// Change the button appearance
	$('.change-icons-buttons button').removeClass('btn-primary').addClass('btn-default');
	$(this).removeClass('btn-default').addClass('btn-primary');
});
$('.change-icons-2').on('click', function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons_2, icm_icon_search_2);

	// Change the button appearance
	$('.change-icons-buttons button').removeClass('btn-primary').addClass('btn-default');
	$(this).removeClass('btn-default').addClass('btn-primary');
});
$('.change-icons-3').on('click', function(e) {
	// Prevent default action
	e.preventDefault();

	// Set the icon
	dynamicIconsElement.setIcons(icm_icons_3, icm_icon_search_3);

	// Change the button appearance
	$('.change-icons-buttons button').removeClass('btn-primary').addClass('btn-default');
	$(this).removeClass('btn-default').addClass('btn-primary');
});
iconSearch (optional)
Array | Object
An array or object of new icon search values. The format is same as searchSource option.
destroyPicker N/A Use this to remove the icon picker and restore the original element.

Live

HTML

<select id="destroy-api" name="destroy-api">
	<option value="">No icon</option>
	<option>icon-user</option>
	<option>icon-search</option>
	<option>icon-right-dir</option>
	<option>icon-star</option>
	<option>icon-cancel</option>
	<option>icon-help-circled</option>
	<option>icon-info-circled</option>
	<option>icon-eye</option>
	<option>icon-tag</option>
	<option>icon-bookmark</option>
	<option>icon-heart</option>
	<option>icon-thumbs-down-alt</option>
	<option>icon-upload-cloud</option>
	<option>icon-phone-squared</option>
	<option>icon-cog</option>
	<option>icon-wrench</option>
	<option>icon-volume-down</option>
	<option>icon-down-dir</option>
	<option>icon-up-dir</option>
	<option>icon-left-dir</option>
	<option>icon-thumbs-up-alt</option>
</select>
<span class="destroy-api-buttons">
	<button type="button" class="btn btn-default destroy-button-destroy">Destroy</button>
	<button type="button" class="btn btn-default destroy-button-restore" style="display: none;">Restore</button>
</span>

JS

/**
 * Destroy API
 */
// Get the variables - Icon Picker and buttons
var destroyIconElement = $('#destroy-api').fontIconPicker({
	theme: 'fip-bootstrap'
}),
destroyButton = $('.destroy-button-destroy'),
restoreButton = $('.destroy-button-restore');

// Attach the events
destroyButton.on('click', function() {
	// Destroy the picker
	destroyIconElement.destroyPicker();

	// Change appearance
	destroyButton.hide();
	restoreButton.fadeIn('fast');
});

restoreButton.on('click', function() {
	// Restore the picker
	destroyIconElement.refreshPicker();

	// Change appearance
	restoreButton.hide();
	destroyButton.fadeIn('fast');
});
refreshPicker newOptions (optional)
Object | Boolean
Pass plugin options to override original ones. Pass false or do not pass anything to use the original ones. 		Refresh the icon picker from DOM or passed options. Useful when DOM has been changed or reinitializing after calling the destroy method or changing the options values.

Live

HTML

<select id="refresh-api" name="refresh-api">
	<option value="">No icon</option>
	<option>icon-user</option>
	<option>icon-search</option>
	<option>icon-right-dir</option>
	<option>icon-star</option>
	<option>icon-cancel</option>
	<option>icon-help-circled</option>
	<option>icon-info-circled</option>
	<option>icon-eye</option>
	<option>icon-tag</option>
	<option>icon-bookmark</option>
	<option>icon-heart</option>
	<option>icon-thumbs-down-alt</option>
	<option>icon-upload-cloud</option>
	<option>icon-phone-squared</option>
	<option>icon-cog</option>
	<option>icon-wrench</option>
	<option>icon-volume-down</option>
	<option>icon-down-dir</option>
	<option>icon-up-dir</option>
	<option>icon-left-dir</option>
	<option>icon-thumbs-up-alt</option>
</select>
<span class="refresh-api-buttons">
	<button type="button" class="btn btn-default">Toggle Search</button>
</span>

JS

/**
 * Refresh API
 */
var refreshAPIElement = $('#refresh-api').fontIconPicker({
	hasSearch: true,
	theme: 'fip-bootstrap'
});
$('.refresh-api-buttons button').on('click', function() {
	// Toggle the hasSearch value
	if ( $(this).data('searchCanceled') ) {
		refreshAPIElement.refreshPicker({
			hasSearch: true,
			theme: 'fip-bootstrap'
		});
		$(this).data('searchCanceled', false);
	} else {
		refreshAPIElement.refreshPicker({
			hasSearch: false,
			theme: 'fip-bootstrap'
		});
		$(this).data('searchCanceled', true);
	}
});
repositionPicker N/A Recalculate and reposition the picker popup. Useful if you have the picker inside a scrolling container. 
var picker = $('.myselect').fontIconPicker();
$('.mycontainer').on( 'scroll', function() {
	picker.repositionPicker();
} );

Plugin Extras

Creating your own theme

Using the theme parameter of the plugin settings, you can give custom classes to the icon picker and thereby change the appearance of individual pickers on the same page. For example if you pass theme: 'mytheme' then a class mytheme will be added to .icons-selector container. Then you can add custom styling using CSS selectors like .mytheme.icons-selector. For the sake of convention and to avoid CSS conflict, we suggest prefixing your theme name with fip-. So the settings becomes theme: 'fip-mytheme' and CSS selector becomes .fip-mytheme.icons-selector. A sample CSS file is given below:

/* fontIconPicker My Theme {@link https://github.com/fontIconPicker/fontIconPicker} */
/* Main container */
.fip-mytheme.icons-selector {

}
/* Icon selector */
.fip-mytheme.icons-selector .selector {

}
/* Selector open button */
.fip-mytheme.icons-selector .selector-button {

}
/* Selector open button hover */
.fip-mytheme.icons-selector .selector-button:hover {

}
.fip-mytheme.icons-selector .selector-button:active {

}
.fip-mytheme.icons-selector .selector-button:hover i {

}
/* Selector open button icon */
.fip-mytheme.icons-selector .selector-button i {

}
/* Selected icon */
.fip-mytheme.icons-selector .selected-icon {

}
.fip-mytheme.icons-selector .selected-icon i {

}
/* IconPicker Popup */
.fip-mytheme.icons-selector .selector-popup {

}
/* Search input & category selector */
.fip-mytheme.icons-selector .selector-search input[type="text"],
.fip-mytheme.icons-selector .selector-category select {

}
.fip-mytheme.icons-selector .selector-search input[type="text"]:focus,
.fip-mytheme.icons-selector .selector-category select:focus {

}
/* Search input placeholder */
.fip-mytheme.icons-selector input::-webkit-input-placeholder {

}
.fip-mytheme.icons-selector input:-moz-placeholder {

}
.fip-mytheme.icons-selector input::-moz-placeholder {

}
.fip-mytheme.icons-selector input:-ms-input-placeholder {

}
/* Search and cancel icon */
.fip-mytheme.icons-selector .selector-search i {

}
/* Icon Container inside Popup */
.fip-mytheme.icons-selector .fip-icons-container {

}
/* Icon container loading */
.fip-mytheme.icons-selector .fip-icons-container .loading {

}
/* Single icon box */
.fip-mytheme.icons-selector .fip-box {

}
/* Single icon box hover */
.fip-mytheme.icons-selector .fip-box:hover {

}

/* Pagination and footer icons */
.fip-mytheme.icons-selector .selector-footer, .fip-mytheme.icons-selector .selector-footer i {

}

/* Pagination arrows icons hover */
.fip-mytheme.icons-selector .selector-arrows i:hover {

}
/* Currently selected icon color */
.fip-mytheme.icons-selector span.current-icon, .fip-mytheme.icons-selector span.current-icon:hover {

}
.fip-mytheme.icons-selector span.current-icon i, .fip-mytheme.icons-selector span.current-icon:hover i {

}
/* No icons found */
.fip-mytheme.icons-selector .icons-picker-error i:before {

}

/* Transitions */
.fip-mytheme.icons-selector .selector-search input[type="text"],
.fip-mytheme.icons-selector .selector-category select,
.fip-mytheme.icons-selector .fip-box {
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

If you are familiar with SCSS then take a look at the source files at GitHub. It provides shorter and easier templates.

If you have created something beautiful and want to share, then you are always welcome to send a pull request on github.

Auto Indexing Icons

Categorizing icons from a rather large set of collection can be quite tedious. While fontIconPicker can be used to auto generate icon list from selection.json file, it still will not categorize the icons (yet) and will require your intervention to do so.

To save you from the trouble a PHP script was written to automatically categorize and index icons downloaded from IcoMoon App. You can get it for free from this link.

If you wish to use the icomoon and fontello library from this package then the icons are already indexed and the JS variables are already defined above in the examples section.

Fork me on GitHub