Simple FontAwesome Icon Picker Plugin For Bootstrap

A simple, easy jQuery icon picker plugin which enables you to easily and quickly pick a Font Awesome (4 and 5) icon using Bootstrap's popover and/or dropdown components.

How to use it:

1. Include jQuery library, Font Awesome and Bootstrap framework before you include the FontAwesome Icon Picker plugin.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<link href="/path/to/font-awesome.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Include the FontAwesome Icon Picker's JS & CSS files in the webpage.

<link href="fontawesome-iconpicker.min.css" rel="stylesheet">
<script src="fontawesome-iconpicker.js"></script>

3. Create an input field for the icon picker.

<input class="icp demo" value="fa-anchor" type="text">

4. The JavaScript to generate a default icon picker for the input field.

$('.demo').iconpicker();

5. Initialize the icon picker on a Bootstrap dropdown component.

<div class="btn-group">
  <button data-selected="graduation-cap" type="button" class="icp demo btn btn-default dropdown-toggle iconpicker-component" data-toggle="dropdown">
      Dropdown  <i class="fa fa-fw"></i>
      <span class="caret"></span>
  </button>
  <div class="dropdown-menu"></div>
</div>

$('.demo').iconpicker();

6. You're also allowed to create an inline icon picker on the webpage as follow:

<label data-title="Inline picker" 
       data-placement="inline" 
       class="icp demo" 
       data-selected="fa-align-justify"
       >
       Inline mode
</label> 

$('.demo').iconpicker();

7. Customize the icon picker in the JavaScript:

$('.demo').iconpicker({

  // Popover title (optional) only if specified in the template
  title: false, 

  // use this value as the current item and ignore the original
  selected: false, 

  // use this value as the current item if input or element value is empty
  defaultValue: false, 

  // (has some issues with auto and CSS). auto, top, bottom, left, right
  placement: 'bottom', 

  // If true, the popover will be repositioned to another position when collapses with the window borders
  collision: 'none', 

  // fade in/out on show/hide ?
  animation: true, 

  // hide iconpicker automatically when a value is picked. 
  // it is ignored if mustAccept is not false and the accept button is visible
  hideOnSelect: false,

  // show footer
  showFooter: false,

  // If true, the search will be added to the footer instead of the title
  searchInFooter: false, 

  // only applicable when there's an iconpicker-btn-accept button in the popover footer
  mustAccept: false, 

  // Appends this class when to the selected item
  selectedCustomClass: 'bg-primary', 

  // list of icon classes 
  icons: [], 

  fullClassFormatter: function(val) {
      return 'fa ' + val;
  },

  // children input selector
  input: 'input,.iconpicker-input', 

  // use the input as a search box too?
  inputSearch: false, 

  // Appends the popover to a specific element. 
  // If not set, the selected element or element parent is used
  container: false, 

  // children component jQuery selector or object, relative to the container element
  component: '.input-group-addon,.iconpicker-component',

  // Plugin templates:
  templates: {
    popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
        '<div class="popover-title"></div><div class="popover-content"></div></div>',
    footer: '<div class="popover-footer"></div>',
    buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' +
        ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
    search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
    iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
    iconpickerItem: '<a role="button" href="#" class="iconpicker-item"><i></i></a>',
  }
  
});

8. Or via HTML data-OPTION attribute on the element as this:

<input data-placement="bottomRight" 
       class="icp demo" 
       value="fa-archive" 
       type="text">

Changelog:

v3.2.0 (2018-07-22)

• Update to FontAwesome 5.5

v3.1.0 (2018-07-22)

• Update to FontAwesome 5.1.1

v3.0.0 (2018-03-29)

• Updated.

v2.0.1 (2018-03-20)

• Added support for the latest Font Awesome 5.

2017-09-26

• v1.3.1

---

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