jQuery fontIconPicker

https://fonticonpicker.github.io/
Admin
jQuery fontIconPicker is a small jQuery plugin which allows you to include an elegant icon picker...
Tokens:24,478
Snippets:136
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install FontIconPicker and Dependencies

Source: https://fonticonpicker.github.io/react-fonticonpicker

Install the necessary packages for React FontIconPicker using npm.

```bash
npm install classnames prop-types react-transition-group @fonticonpicker/react-fonticonpicker --save
```

--------------------------------

### Install fontIconPicker with yarn

Source: https://fonticonpicker.github.io/

Install fontIconPicker and jQuery using yarn. This command adds the packages as project dependencies.

```bash
yarn add jquery@3.3.1 @fonticonpicker/fonticonpicker
```

--------------------------------

### Install fontIconPicker with npm

Source: https://fonticonpicker.github.io/

Install fontIconPicker and jQuery using npm. This command saves the packages as project dependencies.

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

--------------------------------

### Initialize Font Icon Picker with Categorized Icons

Source: https://fonticonpicker.github.io/

Initializes the Font Icon Picker with a predefined categorized list of icons. This example demonstrates setting the 'source', 'useAttribute', and 'attributeName' options.

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

--------------------------------

### Load Icons from SELECT with Optgroup

Source: https://fonticonpicker.github.io/

This example demonstrates how to initialize FontIconPicker on a select element with optgroups for automatic categorization of icons. It uses a Bootstrap theme.

```html
<select id="e2_element">
		<optgroup label="Arrow Icons">
			<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>
```

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

});
```

--------------------------------

### HTML Structure for FontIconPicker Example

Source: https://fonticonpicker.github.io/

Provides the HTML structure for a FontIconPicker instance, including a select element with optgroups and options. This is the basic markup required before initializing the picker with JavaScript.

```html
<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>
```

--------------------------------

### Initialize FontIconPicker with Simple Icon List

Source: https://fonticonpicker.github.io/

Initialize the fontIconPicker with a simple array of icon names. This example also disables the 'empty icon' option and the search functionality.

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

--------------------------------

### Initialize FontIconPicker Component

Source: https://fonticonpicker.github.io/react-fonticonpicker

A complete example of initializing and using the FontIconPicker component within a React application, including state management for the selected icon.

```javascript
import React, { Component } from 'react';
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
import logo from './logo.svg';
import './App.css';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'fipicon-angle-left',
    };
  }
  handleChange = (value) => {
    this.setState({ value });
  }
  render() {
    const props = {
      icons: ['fipicon-angle-left', 'fipicon-angle-right', 'fipicon-angle-up', 'fipicon-angle-down'],
      theme: 'bluegrey',
      renderUsing: 'class',
      value: this.state.value,
      onChange: this.handleChange,
      isMulti: false,
    };
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <FontIconPicker {...props} />
      </div>
    );
  }
}

export default App;
```

--------------------------------

### Load Icons from SELECT Field

Source: https://fonticonpicker.github.io/

This basic example shows how to initialize FontIconPicker on a standard HTML SELECT element. No configuration options are required for this basic usage.

```html
<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>
```

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

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

});
```

--------------------------------

### Import fontIconPicker with require (npm)

Source: https://fonticonpicker.github.io/

Import the installed fontIconPicker package and jQuery using require. This is typically used in Node.js environments or bundlers.

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

--------------------------------

### Destroy and Restore fontIconPicker Instance

Source: https://fonticonpicker.github.io/

This example demonstrates how to destroy an existing fontIconPicker instance and then restore it using the `destroyPicker()` and `refreshPicker()` methods, respectively. It includes the necessary HTML structure and JavaScript event handling.

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

```JavaScript
/**
 * 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');
});
```

--------------------------------

### Load Icons from INPUT Text Field

Source: https://fonticonpicker.github.io/

This example shows how to initialize FontIconPicker on a text input field, loading the icon set directly from a JavaScript object. It uses a dark grey theme.

```html
<input type="text" id="e3_element" name="e3_element" />
```

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

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

});
```

--------------------------------

### Dynamically Refresh fontIconPicker Options

Source: https://fonticonpicker.github.io/

This example shows how to dynamically change fontIconPicker options, such as toggling the search feature, by calling `refreshPicker()` with new options. It requires the specified HTML structure and JavaScript event listener.

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

```JavaScript
/**
 * 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);
	}
});
```

--------------------------------

### Initialization with Custom Search and Attribute Selector

Source: https://fonticonpicker.github.io/

Loads icons with a custom search source and enables an attribute selector for printing fonts, changing the attribute name to 'data-icomoon'.

```html
<input type="text" id="e5_element" name="e5_element" />
```

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

});
```

--------------------------------

### Basic Initialization with Categorized Source

Source: https://fonticonpicker.github.io/

Initializes the font icon picker on an input field using a categorized source and a Bootstrap theme.

```html
<input type="text" id="e4_element" name="e4_element" />
```

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

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

});
```

--------------------------------

### Dynamic Icon Set Change with Event Handling

Source: https://fonticonpicker.github.io/

Initializes the picker and allows changing icon sets on the fly by clicking buttons. Includes event propagation stop to prevent automatic closing.

```html
<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>
```

```javascript
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();
	});
});
```

--------------------------------

### Include Font Files

Source: https://fonticonpicker.github.io/

Link the CSS files for the font icon sets you intend to use with the picker.

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

--------------------------------

### Trigger Change Event on Icon Selection

Source: https://fonticonpicker.github.io/

Demonstrates how to trigger a custom action when an icon is selected in the Font Icon Picker. This example shows updating a span with the selected icon's HTML.

```javascript
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,
	});
});

```

--------------------------------

### Initialize Font Icon Picker with Custom Source

Source: https://fonticonpicker.github.io/

Initializes the icon picker with a custom icon source and search function. It also enables attribute usage for icon data.

```javascript
var icm_icons = {
	'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'
});
```

--------------------------------

### JavaScript for Dynamically Changing Icon Sets

Source: https://fonticonpicker.github.io/

Initializes the font icon picker and demonstrates how to use the `setIcons` public API method to dynamically load different icon sets based on button clicks, updating the picker's source and search source.

```JavaScript
/**
 * 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');
});
```

--------------------------------

### Include FontIconPicker CSS and Themes

Source: https://fonticonpicker.github.io/

Link the core CSS file and choose an optional theme. Multiple themes can be included if needed.

```html
<!-- 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" />
```

--------------------------------

### JavaScript for Initializing and Setting a Single Icon

Source: https://fonticonpicker.github.io/

Initializes the font icon picker on an input field, configures its source and theme, and handles the 'change' event to update the displayed icon. It also shows how to use the `setIcon` method via button clicks.

```JavaScript
// 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 );
} );
```

--------------------------------

### Initialization with No Search and No Empty Icon

Source: https://fonticonpicker.github.io/

Initializes the font icon picker disabling the search functionality and the ability to leave the icon field empty.

```html
<input type="text" id="e7_element" name="e7_element" />
```

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

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

});
```

--------------------------------

### Load Icons from Fontello Config.json

Source: https://fonticonpicker.github.io/

Initializes the font icon picker with a loading icon and loads icons from a Fontello config.json file using AJAX. Ensure CORS is enabled if loading from a different domain.

```html
<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>
```

```javascript
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',
```

--------------------------------

### Include Webfonts CSS

Source: https://fonticonpicker.github.io/react-fonticonpicker

Link to external webfont CSS files, such as Font Awesome, to enable icon rendering.

```html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

```

--------------------------------

### Initialize Font Icon Picker with AppendTo Options

Source: https://fonticonpicker.github.io/

Initializes the Font Icon Picker on two input fields. One appends the picker to a '#main' element, while the other appends it to itself (the default behavior).

```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.
	});
});
```

--------------------------------

### Configure Font Icon Picker to Use HTML Attributes

Source: https://fonticonpicker.github.io/

Initializes the icon picker using HTML attributes for icons. This is useful when icons are defined with custom attributes like 'data-icomoon'. The 'source' should contain numeric values (decimal or hex).

```javascript
$('.myselect').fontIconPicker({
	source: [57392, 57397, 57398, 57399, 57402],
	searchSource: ['Tag', 'Cart', 'Cart 2', 'Cart 3', 'Calculate'],
	useAttribute: true,
	attributeName: 'data-icomoon'
});
```

--------------------------------

### HTML for Dynamically Changing Icon Sets

Source: https://fonticonpicker.github.io/

Provides the HTML markup for an input field and buttons used to switch between different sets of icons in the font icon picker.

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

--------------------------------

### Provide Custom Search Source for Icons

Source: https://fonticonpicker.github.io/

Supplies an alternative set of search strings for icons, which can be different from the main icon source. This is particularly helpful when using numeric icon values and wanting to provide human-readable search terms or titles.

```javascript
// 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'],

```

--------------------------------

### Initialize FontIconPicker on a SELECT Element

Source: https://fonticonpicker.github.io/

Initialize the plugin on a select element with default options. Ensure the DOM is ready before initialization.

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

--------------------------------

### Basic HTML Structure for Font Icon Picker

Source: https://fonticonpicker.github.io/

This HTML sets up input fields that will be transformed into icon pickers. The 'appendTo' option in JavaScript determines where the picker is attached.

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

--------------------------------

### HTML Structure for SVG Display

Source: https://fonticonpicker.github.io/

This HTML sets up a container to display a live preview of an SVG icon, including a placeholder image and descriptive text. It also includes an input field for searching and selecting icons.

```html
<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>
```

--------------------------------

### Initialize FontIconPicker on an INPUT Element

Source: https://fonticonpicker.github.io/

Initialize the plugin on a text input element, providing a custom source of icons and disabling search. Ensure the DOM is ready.

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

--------------------------------

### HTML Input for Loading FontAwesome Icons

Source: https://fonticonpicker.github.io/

This HTML sets up an input field and a button to trigger the loading of icons from FontAwesome. The button is styled with Bootstrap classes.

```html
<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>
```

--------------------------------

### Customize Category Dropdown Label

Source: https://fonticonpicker.github.io/

Initializes the icon picker and customizes the label for the 'all categories' option in the category dropdown.

```javascript
$('.myselect').fontIconPicker({
	useAttribute: true,
	attributeName: 'data-icomoon',
	allCategoryText: 'Show all'
});
```

--------------------------------

### Custom Theme CSS for FontIconPicker

Source: https://fonticonpicker.github.io/

This CSS file provides styling for a custom theme named 'fip-mytheme'. It targets various elements within the icon picker to allow for detailed visual customization. Use this as a base for creating your own unique themes.

```css
/* 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;
}
			
```

--------------------------------

### HTML for Setting a Single Icon

Source: https://fonticonpicker.github.io/

Provides the HTML markup for an input field and buttons to select and display a single icon using the font icon picker.

```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>
```
Tokens:
Raw