1.- Add the style file bootstrap-iconpicker.min.css
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css">
2.- Add the javascript file bootstrap-iconpicker.min.js
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>
Add role="iconpicker"
to initialize the iconpicker.
role="iconpicker"
<button class="btn btn-default" role="iconpicker"></button>
Add data-iconset="glyphicon|fontawesome"
to idicates the iconset.
data-iconset="glyphicon"
data-iconset="fontawesome"
<button class="btn btn-default" data-iconset="fontawesome" role="iconpicker"></button>
Add data-icon="glyphicon-heart"
to select an icon.
data-icon="glyphicon-heart"
data-icon="fa-github-alt"
<button class="btn btn-default" data-icon="fontawesome" role="iconpicker"></button>
Add data-rows="3"
or data-cols="6"
to set rows and columns to showing in iconpicker.
data-rows="3"
and data-cols="6"
<button class="btn btn-default" data-rows="3" data-cols="6" role="iconpicker"></button>
Add data-placement="left|top|bottom|right"
to indicate where the datepicker will be display.
data-placement="left"
data-placement="top"
data-placement="bottom"
data-placement="right"
<button class="btn btn-default" data-placement="left|top|bottom|right" role="iconpicker"></button>
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"
<button class="btn btn-danger" role="iconpicker"></button>
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});