Bootstrap-Iconpicker-Latest

Iconpicker
A simple iconpicker for Bootstrap 3.x and 4.x

View on Git Hub
Lastest version ({0})
Stars  
Fork  
Releases  
Contributors  
Download ({0}).zip
Download ({0}).tar.gz

Configuration. Bootstrap 3.x

1.- Add the style files: bootstrap.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

1.- Add the style files: bootstrap.min.css, ionicons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Ionicons CDN -->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

Iconset versions availables are:

2.0.1 //Use CDN => http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
1.5.2 //Use CDN => http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css

1.- Add the style files: bootstrap.min.css, flag-icon.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Flag Icons CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

1.- Add the style files: bootstrap.min.css, font-awesome.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

Iconset versions availables are:

5.3.1 //Use CDN (Free) => https://use.fontawesome.com/releases/v5.3.1/css/all.css
4.7.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
4.6.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css
4.5.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
4.4.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
4.3.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
4.2.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
4.1.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
4.0.0 //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css

1.- Add the style files: bootstrap.min.css, weather-icons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Weather Icons CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

Iconset versions availables are:

2.0.10 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css
1.2.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2.0/css/weather-icons.min.css

1.- Add the style files: bootstrap.min.css, map-icons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Map Icons -->
<link rel="stylesheet" href="icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

1.- Add the style files: bootstrap.min.css, octicons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Octicons CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

Iconset versions availables are:

4.4.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css
4.3.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.3.0/font/octicons.min.css
4.2.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.1/font/octicons.min.css
4.2.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.0/font/octicons.min.css
4.1.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.1/font/octicons.min.css
4.1.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.0/font/octicons.min.css
4.0.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.0.0/font/octicons.min.css
3.5.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css
3.4.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.1/octicons.min.css
3.4.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.0/octicons.min.css
3.3.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.min.css
3.2.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.2.0/octicons.min.css
3.1.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css
3.0.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.1/octicons.min.css
3.0.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.0/octicons.min.css
2.4.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.1/octicons.min.css
2.4.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.0/octicons.min.css
2.3.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.3.0/octicons.min.css
2.2.3 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.3/octicons.min.css
2.2.2 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.2/octicons.min.css
2.2.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.1/octicons.min.css
2.2.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.min.css
2.1.2 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.2/octicons.min.css
2.1.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.1/octicons.min.css
2.1.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.0/octicons.min.css
2.0.2 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css
2.0.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.1/octicons.min.css
2.0.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.0/octicons.min.css

1.- Add the style files: bootstrap.min.css, typicons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Typicons CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

Iconset versions availables are:

2.0.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.1/typicons.min.css
2.0.2 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.2/typicons.min.css
2.0.3 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.3/typicons.min.css
2.0.4 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.4/typicons.min.css
2.0.5 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.5/typicons.min.css
2.0.6 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.6/typicons.min.css
2.0.7 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css
2.0.8 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css
2.0.9 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css

1.- Add the style files: bootstrap.min.css, elusive-icons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Elusive Icons -->
<link rel="stylesheet" href="icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

1.- Add the style files: bootstrap.min.css, material-design-iconic-font.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Material Design CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js and bootstrap-iconpicker.bundle.min.js

                            <!-- jQuery CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

Iconset versions availables are:

2.2.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css
2.1.2 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css
2.1.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.1/css/material-design-iconic-font.min.css
2.1.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.0/css/material-design-iconic-font.min.css
2.0.2 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css
2.0.1 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.1/css/material-design-iconic-font.min.css
2.0.0 //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.0/css/material-design-iconic-font.min.css
1.1.1 //Deprecated

Via data attributes.

Initialize.

Add role="iconpicker" to initialize the iconpicker.

button
role="iconpicker"

div
role="iconpicker"

                    <!-- Button tag -->
<button class="btn btn-default" role="iconpicker"></button>
<!-- Div tag -->
<div role="iconpicker"></div>

Use iconpicker in a form

Just add attribute name="" in button tag or div tag.

Set Iconset, Iconset Version and Icon Selected.

Add data-iconset="glyphicon|ionicon|fontawesome4|fontawesome5|weathericon|mapicon|octicon|typicon|elusiveicon|flagicon" to idicates the iconset. Default: data-iconset="fontawesome5"

Add data-iconset-version="" to idicates the iconset version. Default: data-iconset="lastest"

Add data-icon="" to select an icon. Default: data-icon=""

data-iconset="glyphicon"
data-icon="glyphicon-camera"

data-iconset="ionicon"
data-icon="ion-ionic"

data-iconset="fontawesome5"
data-icon="fas fa-wifi"

data-iconset="weathericon"
data-icon="wi-day-rain"

data-iconset="mapicon"
data-icon="map-icon-walking"

data-iconset="octicon"
data-icon="octicon-bug"

data-iconset="typicon"
data-icon="typcn-anchor"

data-iconset="elusiveicon"
data-icon="el-icon-female"

data-iconset="materialdesign"
data-icon="zmdi-card-sd"

data-iconset="flagicon"
data-icon="flag-icon-mx"

                    <!-- Example 1 -->
<button class="btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-default" data-iconset="ionicon" data-icon="ion-ionic" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-default" data-iconset="fontawesome5" data-icon="fas fa-wifi" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-default" data-iconset="weathericon" data-icon="wi-day-rain" role="iconpicker"></button>
<!-- Example 5 -->
<button class="btn btn-default" data-iconset="mapicon" data-icon="map-icon-walking" role="iconpicker"></button>
<!-- Example 6 -->
<button class="btn btn-default" data-iconset="octicon" data-icon="octicon-bug" role="iconpicker"></button>
<!-- Example 7 -->
<button class="btn btn-default" data-iconset="typicon" data-icon="typcn-anchor" role="iconpicker"></button>
<!-- Example 8 -->
<button class="btn btn-default" data-iconset="elusiveicon" data-icon="el-icon-female" role="iconpicker"></button>
<!-- Example 9 -->
<button class="btn btn-default" data-iconset="materialdesign" data-icon="zmdi-card-sd" role="iconpicker"></button>
<!-- Example 10 -->
<button class="btn btn-default" data-iconset="flagicon" data-icon="flag-icon-mx" role="iconpicker"></button>

Iconset file

Should review the configuration for each iconset.

Set Search Input.

Add data-search="true|false" to show or hide the search field. Default: data-search="true"

Add data-search-text="" to indicate initial search text. Default: data-search-text="Search icon"

data-search="true"
data-search-text="Search..."

data-search="false"

                    <!-- Example 1 -->
<div data-search="true" data-search-text="Search..." role="iconpicker"></div>
<!-- Example 2 -->
<div data-search="false" role="iconpicker"></div>

Set Labels.

Add data-header="true|false" to show or hide the header. Default: data-header="true"

Add data-label-header="" to indicate header text. Default: data-label-header="{0} / {1}"

Add data-footer="true|false" to show or hide the footer. Default: data-footer="true"

Add data-label-footer="" to indicate footer text. Default: data-label-footer="{0} - {1} of {2}"

data-label-header="{0} - {1} pages"
data-label-footer="{0} - {1} of {2} icons"

data-header="false"
data-footer="false"

                    <!-- Example 1 -->
<div data-label-header="{0} - {1} pages" data-label-footer="{0} - {1} of {2} icons" role="iconpicker"></div>
<!-- Example 2 -->
<div data-header="false" data-footer="false" role="iconpicker"></div>

Set Rows and Columns.

Add data-rows="" to indicates the rows to showing in iconpicker. Default: data-rows="4"

Add data-cols="" to indicates the columns to showing in iconpicker. Default: data-cols="4"

data-rows="3"
data-cols="6"

                    <div data-rows="3" data-cols="6" role="iconpicker"></div>

Set Align. (Only in div tag)

Add data-align="left|center|right" to indicate the align. Default: data-align="center"

data-align="left"

data-align="center"

data-align="right"

                    <!-- Example 1 -->
<div data-align="left" role="iconpicker"></div>
<!-- Example 2 -->
<div data-align="center" role="iconpicker"></div>
<!-- Example 3 -->
<div data-align="right" role="iconpicker"></div>

Set Placement. (Only in button tag)

Add data-placement="left|top|bottom|right" to indicate where the iconpicker will be display. Default: data-placement="bottom"

data-placement="left"

data-placement="top"

data-placement="bottom"

data-placement="right"

                    <!-- Example 1 -->
<button class="btn btn-default" data-placement="left" data-icon="fas fa-arrow-left" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-default" data-placement="top" data-icon="fas fa-arrow-up" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-default" data-placement="bottom" data-icon="fas fa-arrow-down" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-default" data-placement="right" data-icon="fas fa-arrow-right" role="iconpicker"></button>

Set Style Navigations Buttons.

Add data-arrow-class="" to indicate the class of the arrows. Default: data-arrow-class="btn-primary"

Add data-arrow-prev-icon-class="" to indicates the class icon previous arrow. Default: data-arrow-prev-icon-class="fas fa-arrow-left"

Add data-arrow-next-icon-class="" to indicates the class icon next arrow. Default: data-arrow-next-icon-class="fas fa-arrow-right"

data-arrow-class="btn-success"
data-arrow-prev-icon-class="fas fa-angle-left"
data-arrow-next-icon-class="fas fa-angle-right"

                    <div data-arrow-class="btn-success" data-arrow-prev-icon-class="fas fa-angle-left" data-arrow-next-icon-class="fas fa-angle-right" role="iconpicker"></div>

Set Style Icons Buttons.

Add data-selected-class="" to indicate the class of the selected icon. Default: data-selected-class="btn-warning"

Add data-unselected-class="" to indicate unselected icons. Default: data-unselected-class="btn-secondary"

data-selected-class="btn-danger"
data-unselected-class="btn-info"

                    <div data-selected-class="btn-danger" data-unselected-class="btn-info" role="iconpicker"></div>

Button Style.

Add in class="" your custom style.

class="btn btn-default"

class="btn btn-primary"

class="btn btn-success"

class="btn btn-warning"

class="btn btn-danger"

class="btn btn-info"

                    <!-- Example 1 -->
<button class="btn btn-default" data-icon="fab fa-jsfiddle" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-primary" data-icon="fab fa-facebook" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-success" data-icon="fab fa-html5" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-warning" data-icon="fab fa-stack-overflow" role="iconpicker"></button>
<!-- Example 5 -->
<button class="btn btn-danger" data-icon="fab fa-youtube" role="iconpicker"></button>
<!-- Example 6 -->
<button class="btn btn-info" data-icon="fab fa-twitter" role="iconpicker"></button>

Button addons.

You can include it in a class="input-group".

                    <!-- Example 1 -->
<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" data-icon="fas fa-map-marker-alt" role="iconpicker"></button>
    </span>
    <input type="text" class="form-control" value="My marker">
</div>
<!-- Example 2 -->
<div class="input-group">
    <input type="text" class="form-control" value="My house">
    <span class="input-group-btn">
        <button class="btn btn-default" data-icon="fas fa-home" role="iconpicker"></button>
    </span>
</div>

Via JavaScript

Initialize.

.iconpicker(options) Initializes an iconpicker with options.

Options.

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-align="".

Name Type Default Description
align String 'center' (Only in div tag) Align of the iconpicker.
arrowClass String 'btn-primary' Class of the arrows.
arrowPrevIconClass String 'fas fa-arrow-left' Icon class of the previous arrow.
arrowNextIconClass String 'fas fa-arrow-right' Icon class of the next arrow.
cols Integer 4 Number of columns to display in the iconpicker. Min value is: 4
footer Boolean true Indicates whether to show or hide the footer. true|false
header Boolean true Indicates whether to show or hide the header. true|false
icon String '' Selected icon.
iconset String | Object 'fontawesome5' Selected iconset. glyphicon|ionicon|fontawesome4|fontawesome5|weathericon|mapicon|octicon|typicon|elusiveicon
Object structure is:
{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }
labelHeader String '{0} / {1}' Header text.
labelFooter String '{0} - {1} of {2}' Footer text.
placement String 'bottom' (Only in button tag) Where the iconpicker will be display. left|top|bottom|right
rows Integer 4 Number of rows to display in the iconpicker. Value 0 indicates all rows.
search Boolean true Indicates whether to show or hide the search field. true|false
searchText String 'Search icon' Text of search field.
selectedClass String 'btn-warning' Class of the selected icon.
unselectedClass String 'btn-secondary' Class of the icons unselected. 
                    // Default options
$('#target').iconpicker();

// Custom options
$('#target').iconpicker({
    align: 'center', // Only in div tag
    arrowClass: 'btn-danger',
    arrowPrevIconClass: 'fas fa-angle-left',
    arrowNextIconClass: 'fas fa-angle-right',
    cols: 10,
    footer: true,
    header: true,
    icon: 'fas fa-bomb',
    iconset: 'fontawesome5',
    labelHeader: '{0} of {1} pages',
    labelFooter: '{0} - {1} of {2} icons',
    placement: 'bottom', // Only in button tag
    rows: 5,
    search: true,
    searchText: 'Search',
    selectedClass: 'btn-success',
    unselectedClass: ''
});

Events.

Name Description
.on('change', function(e){}) This event fires when select an icon. 
                            $('#target').on('change', function(e) {
    console.log(e.icon);
});
Console

Methods.

Name Description
.iconpicker('setAlign', String) (Only in div tag) Sets align of the iconpicker. left|center|right
.iconpicker('setArrowClass', String) Sets class of the arrows.
.iconpicker('setArrowPrevIconClass', String) Sets icon class of the previous arrow.
.iconpicker('setArrowNextIconClass', String) Sets icon class of the next arrow.
.iconpicker('setCols', Integer) Sets the columns to display in the iconpicker. Min value is: 4
.iconpicker('setFooter', Boolean) Sets whether to show or hide the footer. true|false
.iconpicker('setHeader', Boolean) Sets whether to show or hide the header. true|false
.iconpicker('setIcon', String) Sets an icon.
.iconpicker('setIconset', String | Object) Sets an iconset. glyphicon|ionicon|fontawesome4|fontawesome5|weathericon|mapicon|octicon|typicon|elusiveicon
Object structure is:
{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }
.iconpicker('setLabelHeader', String) Sets header text.
.iconpicker('setLabelFooter', String) Sets footer text.
.iconpicker('setPlacement', String) (Only in button tag) Sets where the iconpicker will be display. left|top|bottom|right
.iconpicker('setRows', Integer) Sets the rows to display in the iconpicker. Value = 0 indicates all rows.
.iconpicker('setSearch', Boolean) Sets whether to show or hide the search field. true|false
.iconpicker('setSearchText', String) Sets the text search field.
.iconpicker('setSelectedClass', String) Sets class of the selected icon.
.iconpicker('setUnselectedClass', String) Sets class of the icons unselected. 
                    $('#target').iconpicker()
            .iconpicker('setAlign', 'center') // Only in div tag
            .iconpicker('setArrowClass', 'btn-success')
            .iconpicker('setArrowPrevIconClass', 'fas fa-angle-left')
            .iconpicker('setArrowNextIconClass', 'fas fa-angle-right')
            .iconpicker('setCols', 9)
            .iconpicker('setFooter', true)
            .iconpicker('setHeader', true)
            .iconpicker('setIconset', {
                iconClass: 'fas',
                iconClassFix: 'fa-',
                icons: [
                    'fast-backward',
                    'step-backward',
                    'backward',
                    'play',
                    'pause',
                    'stop',
                    'forward',
                    'step-forward',
                    'fast-forward'
                ]
            })
            .iconpicker('setIcon', 'fa-pause')
            .iconpicker('setLabelHeader', '{0} of {1} pages')
            .iconpicker('setLabelFooter', '{0} - {1} of {2} icons')
            .iconpicker('setPlacement', 'bottom') // Only in button tag
            .iconpicker('setRows', 0)
            .iconpicker('setSearch', true)
            .iconpicker('setSearchText', 'Type text')
            .iconpicker('setSelectedClass', 'btn-danger')
            .iconpicker('setUnselectedClass', 'btn-primary');

See in action. Button Builder.

Button text

Full width button