JSFiddle - React, Tailwind, and code Playground

by Victor Valencia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-iconpicker/1.9.0/css/bootstrap-iconpicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-iconpicker/1.9.0/js/bootstrap-iconpicker-iconset-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-iconpicker/1.9.0/js/bootstrap-iconpicker.min.js"></script>
<div class="row text-center">
    <div class="col-md-12">
        <h3>Button tag</h3>
        <button id="button" class="btn btn-secondary"></button>
    </div>
    <div class="col-md-12">
        <h3>Div tag</h3>
        <div id="div"></div>
    </div>
</div>

CSS

body {
    padding: 12px;
}

JavaScript

$('#button,#div').iconpicker({
    align: 'center',
    arrowClass: 'btn-danger',
    arrowPrevIconClass: 'fa fa-angle-left',
    arrowNextIconClass: 'fa fa-angle-right',
    cols: 5,
    footer: true,
    header: true,
    icon: 'fa-heart',
    iconset: 'fontawesome',   
    labelHeader: '{0} of {1} pages',
    labelFooter: '{0} - {1} of {2} icons',
    placement: 'bottom',
    rows: 5,
    search: true,
    searchText: 'Search',
    selectedClass: 'btn-success',
    unselectedClass: 'btn-secondary'
});