Simple FontAwesome Icon Picker Plugin Bootstrap - Download Simple FontAwesome Icon Picker Plugin For Bootstrap

Download Simple FontAwesome Icon Picker Plugin For Bootstrap

By Posted on

This time I will share jQuery Plugin and tutorial about Simple FontAwesome Icon Picker Plugin For Bootstrap, hope it will help you in programming stack.

Simple FontAwesome Icon Picker Plugin Bootstrap - Download Simple FontAwesome Icon Picker Plugin For Bootstrap
File Size: 988 KB
Views Total: 15588
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <link href="/path/to/bootstrap.min.css" rel="stylesheet">
2 <link href="/path/to/font-awesome.min.css" rel="stylesheet">
3 <script src="/path/to/jquery.min.js"></script>
4 <script src="/path/to/bootstrap.min.js"></script>

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

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

3. Create an input field for the icon picker.

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

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

view source
1 $('.demo').iconpicker();

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

view source
1 <div class="btn-group">
2   <button data-selected="graduation-cap" type="button" class="icp demo btn btn-default dropdown-toggle iconpicker-component" data-toggle="dropdown">
3       Dropdown  <i class="fa fa-fw"></i>
4       <span class="caret"></span>
5   </button>
6   <div class="dropdown-menu"></div>
7 </div>
view source
1 $('.demo').iconpicker();

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

view source
1 <label data-title="Inline picker"
2        data-placement="inline"
3        class="icp demo"
4        data-selected="fa-align-justify"
5        >
6        Inline mode
7 </label>
view source
1 $('.demo').iconpicker();

7. Customize the icon picker in the JavaScript:

view source
01 $('.demo').iconpicker({
02  
03   // Popover title (optional) only if specified in the template
04   title: false,
05  
06   // use this value as the current item and ignore the original
07   selected: false,
08  
09   // use this value as the current item if input or element value is empty
10   defaultValue: false,
11  
12   // (has some issues with auto and CSS). auto, top, bottom, left, right
13   placement: 'bottom',
14  
15   // If true, the popover will be repositioned to another position when collapses with the window borders
16   collision: 'none',
17  
18   // fade in/out on show/hide ?
19   animation: true,
20  
21   // hide iconpicker automatically when a value is picked.
22   // it is ignored if mustAccept is not false and the accept button is visible
23   hideOnSelect: false,
24  
25   // show footer
26   showFooter: false,
27  
28   // If true, the search will be added to the footer instead of the title
29   searchInFooter: false,
30  
31   // only applicable when there's an iconpicker-btn-accept button in the popover footer
32   mustAccept: false,
33  
34   // Appends this class when to the selected item
35   selectedCustomClass: 'bg-primary',
36  
37   // list of icon classes
38   icons: [],
39  
40   fullClassFormatter: function(val) {
41       return 'fa ' + val;
42   },
43  
44   // children input selector
45   input: 'input,.iconpicker-input',
46  
47   // use the input as a search box too?
48   inputSearch: false,
49  
50   // Appends the popover to a specific element.
51   // If not set, the selected element or element parent is used
52   container: false,
53  
54   // children component jQuery selector or object, relative to the container element
55   component: '.input-group-addon,.iconpicker-component',
56  
57   // Plugin templates:
58   templates: {
59     popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
60         '<div class="popover-title"></div><div class="popover-content"></div></div>',
61     footer: '<div class="popover-footer"></div>',
62     buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' +
63         ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
64     search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
65     iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
66     iconpickerItem: '<a role="button" href="#" class="iconpicker-item"><i></i></a>',
67    source : jquery.net

Related posts: