jQuery Based Icon Picker For Bootstrap 4/3 - iconpicker

Iconpicker is a jQuery icon picker plugin for Bootstrap 4 and Bootstrap 3 that allows you to choose and pick a icon from multiple icon sets in a tooltip-like popup interface.

Basic Usage:

1. Include jQuery javascript library in your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include Twitter's Bootstrap 3 Framework in your page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

3. Include jQuery iconpicker plugin in your page but after jQuery library.

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

4. Include Font Awesome in your page if you want to use Font Awesome font icon set.

<link rel="stylesheet" href="font-awesome-4.0.3/css/font-awesome.min.css">

5. Create a icon picker button with role="iconpicker" attribute to initialize the plugin.

<button class="btn btn-default" name="icon" role="iconpicker"></button>

6. The plugin provides 2 ways to set the options: data-* attributes or javascript.

// Using data-* attributes

data-iconset="glyphicon|fontawesome" // Indicates the iconset.
data-rows="3", // Sets rows to showing in iconpicker.
data-cols="6", // Sets columns to showing in iconpicker.
data-placement="left|top|bottom|right", // Indicates where the iconpicker will be display.

// Using javascript

$('#SELECTOR').iconpicker({ 
iconset: 'fontawesome', 
icon: 'fa-key', 
rows: 5,
cols: 5,
placement: 'top',
});

Changelog:

v1.10.0 (2018-10-16)

• Updated for Bootstrap 4.

2017-07-26

• v1.9.0: Add iconset flagicon-2.8.0.

---

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