jQuery fontIconPicker - An elegant font icon picker written in jQuery

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.

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

Using on SELECT elements
Using on INPUT[type="text"] elements

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=""></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.

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

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

HTML
JavaScript

<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

HTML
JavaScript

<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');
		}
	});
});

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' });
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 });
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 });
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' });
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=""></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 ``.	`'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 ``). 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: ['', '', '', '', '', '', '', '', '', ''], 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' });

Plugin APIs

fontIconPicker provides three public APIs to manipulating the icon picker.

API	Parameters	Description	Example
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'); });
setIcons	iconSearch (optional) `Array \| Object` An array or object of new icon search values. The format is same as `searchSource` option.	Use this method to dynamically change icons on the fly.
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); } });

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

jQuery fontIconPicker v2.0.0

How it works

Examples

Variable Definitions

Plugin Configuration Options

Simple list of icons, chained with other options

Categorized list of icons

Plugin APIs

Live

HTML

JS

Live

HTML

JS

Live

HTML

JS

Plugin Extras

Creating your own theme

Auto Indexing Icons