index_v3x.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Bootstrap Iconpicker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/docs.css"/>
<link rel="stylesheet" href="css/pygments-manni.css"/>
<link rel="stylesheet" href="icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<link rel="stylesheet" href="icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css"/>
<link rel="stylesheet" href="dist/css/bootstrap-iconpicker.css"/>
<style type="text/css">
.bg-gray {
color: #777;
background-color: #eee;
}
#btnGithub, #btnDonate {
width: 200px;
}
#btnGithub span, #btnDonate span {
font-style: italic;
}
#btnStars, #btnForks, #btnReleases, #btnContributors {
font-weight: bold;
}
.tab-content {
padding: 12px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
code.code-default {
color: #ffffff;
background-color: #f0ad4e;
}
code.code-info {
color: #ffffff;
background-color: #5bc0de;
}
code.code-options {
color: #ffffff;
background-color: #9b59b6;
}
code.code-event {
color: #ffffff;
background-color: #449d44;
}
code.code-method {
color: #ffffff;
background-color: #357ebd;
}
#console {
height: 135px;
overflow-y: scroll;
color: white;
background-color: black;
}
</style>
</head>
<body>
<!-- Begin :: Donate Form -->
<form id="formDonate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XFTVFLZRPACGN">
</form>
<!-- End :: Donate Form -->
<div class="container">
<div class="row text-center text-primary">
<h1>Bootstrap-Iconpicker <small><em>By Victor Valencia Rico.</em></small></h1>
<img src="bootstrap-iconpicker_3x.png" title="Iconpicker" alt="Iconpicker"/></br>
<span>A simple iconpicker for Bootstrap 3.x and <a href="index.html" title="Docs for Bootstrap 4.x">4.x</a></span>
</div>
<div class="row text-center" style="padding-top: 20px;">
<div class="col-md-12">
<div class="btn-group buttons-menu-container">
<a id="btnGithub" class="btn btn-primary" href="https://github.com/victor-valencia/bootstrap-iconpicker" target="_blank" role="button">
<i class="fab fa-github-alt fa-2x"></i></br>
View on Git Hub</br>
<span>Lastest version ({0})</span>
</a>
</div>
<div class="btn-group buttons-menu-container">
<a id="btnDonate" class="btn btn-warning" href="#" target="_blank" role="button">
<i class="fab fa-cc-paypal fa-2x"></i></br> Donate </br>
<span>Buy me a beer!</span>
</a>
</div>
</div>
</div>
<div class="row text-center" style="padding-top: 20px;">
<div class="col-md-12">
<div class="btn-group buttons-menu-container">
<a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/stargazers" target="_blank" role="button">
<i class="octicon octicon-star"></i> Stars
</a>
<a id="btnStars" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/stargazers" target="_blank" role="button">
</a>
</div>
<div class="btn-group buttons-menu-container">
<a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/fork" target="_blank" role="button">
<i class="octicon octicon-repo-forked"></i> Fork
</a>
<a id="btnForks" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/fork" target="_blank" role="button">
</a>
</div>
<div class="btn-group buttons-menu-container">
<a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/releases" target="_blank" role="button">
<i class="octicon octicon-tag"></i> Releases
</a>
<a id="btnReleases" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/releases" target="_blank" role="button">
</a>
</div>
<div class="btn-group buttons-menu-container">
<a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/graphs/contributors" target="_blank" role="button">
<i class="octicon octicon-organization"></i> Contributors
</a>
<a id="btnContributors" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/graphs/contributors" target="_blank" role="button">
</a>
</div>
</div>
</div>
<div class="row text-center" style="padding-top: 20px;">
<div class="col-md-12">
<div class="btn-group buttons-menu-container">
<a id="btnDownloadZip" class="btn btn-default" href="#" role="button">
<i class="octicon octicon-file-zip"></i> Download ({0}).zip
</a>
</div>
<div class="btn-group buttons-menu-container">
<a id="btnDownloadTar" class="btn btn-default" href="#" role="button">
<i class="octicon octicon-file-zip"></i> Download ({0}).tar.gz
</a>
</div>
</div>
</div>
<h1 class="page-header">Configuration. <small>Bootstrap 3.x</small></h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown active">
<a id="tabConfig" class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="glyphicon glyphicon-camera"></i> Glyphicon (Bootstrap) <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#elusiveicon" role="tab" data-toggle="tab"><i class="el-icon-female"></i> Elusive Icons 2.0.0</a></li>
<li><a href="#flagicon" role="tab" data-toggle="tab"><i class="flag-icon flag-icon-mx"></i> Flag Icon 2.8.0</a></li>
<li><a href="#fontawesome" role="tab" data-toggle="tab"><i class="fas fa-wifi"></i> Font Awesome (Free) 5.3.1</a></li>
<li><a href="#glyphicon" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-camera"></i> Glyphicon (Bootstrap)</a></li>
<li><a href="#ionicon" role="tab" data-toggle="tab"><i class="ion-ionic"></i> Ionicons 2.0.1</a></li>
<li><a href="#mapicon" role="tab" data-toggle="tab"><i class="map-icon-walking"></i> Map Icons 2.1.0</a></li>
<li><a href="#materialdesign" role="tab" data-toggle="tab"><i class="zmdi zmdi-3d-rotation"></i> Material Design 2.2.0</a></li>
<li><a href="#octicon" role="tab" data-toggle="tab"><i class="octicon octicon-bug"></i> Octicons 4.4.0</a></li>
<li><a href="#typicon" role="tab" data-toggle="tab"><i class="typcn typcn-anchor"></i> Typicons 2.0.9</a></li>
<li><a href="#weathericon" role="tab" data-toggle="tab"><i class="wi wi-day-rain"></i> Weather Icons 2.0.10</a></li>
</ul>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="glyphicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="glyphicon" role="iconpicker"></div>
</div>
<div class="tab-pane" id="ionicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>ionicons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Ionicons CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="ionicon" role="iconpicker"></div>
<div class="bs-callout bs-callout-info">
<h4>Iconset versions availables are:</h4>
<p>
<code>2.0.1</code> <span class="c">//Use CDN => </span><span class="o">http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css</span></br>
<code>1.5.2</code> <span class="c">//Use CDN => </span><span class="o">http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css</span></br>
</p>
</div>
</div>
<div class="tab-pane" id="flagicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>flag-icon.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Flag Icons CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="flagicon" role="iconpicker"></div>
</div>
<div class="tab-pane" id="fontawesome">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>font-awesome.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Font Awesome CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://use.fontawesome.com/releases/v5.3.1/css/all.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="fontawesome5" role="iconpicker"></div>
<div class="bs-callout bs-callout-info">
<h4>Iconset versions availables are:</h4>
<p>
<code>5.3.1</code> <span class="c">//Use CDN (Free) => </span><span class="o">https://use.fontawesome.com/releases/v5.3.1/css/all.css</span></br>
<code>4.7.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</span></br>
<code>4.6.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css</span></br>
<code>4.5.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css</span></br>
<code>4.4.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css</span></br>
<code>4.3.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</span></br>
<code>4.2.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css</span></br>
<code>4.1.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css</span></br>
<code>4.0.0</code> <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css</span>
</p>
</div>
</div>
<div class="tab-pane" id="weathericon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>weather-icons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Weather Icons CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="weathericon" role="iconpicker"></div>
<div class="bs-callout bs-callout-info">
<h4>Iconset versions availables are:</h4>
<p>
<code>2.0.10</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css</span></br>
<code>1.2.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2.0/css/weather-icons.min.css</span></br>
</p>
</div>
</div>
<div class="tab-pane" id="mapicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>map-icons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Map Icons --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"icon-fonts/map-icons-2.1.0/css/map-icons.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="mapicon" role="iconpicker"></div>
</div>
<div class="tab-pane" id="octicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>octicons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Octicons CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="octicon" role="iconpicker"></div>
<div class="bs-callout bs-callout-info">
<h4>Iconset versions availables are:</h4>
<p>
<code>4.4.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css</span></br>
<code>4.3.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.3.0/font/octicons.min.css</span></br>
<code>4.2.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.1/font/octicons.min.css</span></br>
<code>4.2.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.0/font/octicons.min.css</span></br>
<code>4.1.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.1/font/octicons.min.css</span></br>
<code>4.1.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.0/font/octicons.min.css</span></br>
<code>4.0.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.0.0/font/octicons.min.css</span></br>
<code>3.5.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css</span></br>
<code>3.4.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.1/octicons.min.css</span></br>
<code>3.4.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.0/octicons.min.css</span></br>
<code>3.3.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.min.css</span></br>
<code>3.2.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.2.0/octicons.min.css</span></br>
<code>3.1.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css</span></br>
<code>3.0.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.1/octicons.min.css</span></br>
<code>3.0.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.0/octicons.min.css</span></br>
<code>2.4.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.1/octicons.min.css</span></br>
<code>2.4.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.0/octicons.min.css</span></br>
<code>2.3.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.3.0/octicons.min.css</span></br>
<code>2.2.3</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.3/octicons.min.css</span></br>
<code>2.2.2</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.2/octicons.min.css</span></br>
<code>2.2.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.1/octicons.min.css</span></br>
<code>2.2.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.min.css</span></br>
<code>2.1.2</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.2/octicons.min.css</span></br>
<code>2.1.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.1/octicons.min.css</span></br>
<code>2.1.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.0/octicons.min.css</span></br>
<code>2.0.2</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css</span></br>
<code>2.0.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.1/octicons.min.css</span></br>
<code>2.0.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.0/octicons.min.css</span>
</p>
</div>
</div>
<div class="tab-pane" id="typicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>typicons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Typicons CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="typicon" role="iconpicker"></div>
<div class="bs-callout bs-callout-info">
<h4>Iconset versions availables are:</h4>
<p>
<code>2.0.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.1/typicons.min.css</span></br>
<code>2.0.2</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.2/typicons.min.css</span></br>
<code>2.0.3</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.3/typicons.min.css</span></br>
<code>2.0.4</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.4/typicons.min.css</span></br>
<code>2.0.5</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.5/typicons.min.css</span></br>
<code>2.0.6</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.6/typicons.min.css</span></br>
<code>2.0.7</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css</span></br>
<code>2.0.8</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css</span></br>
<code>2.0.9</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css</span>
</p>
</div>
</div>
<div class="tab-pane" id="elusiveicon">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>elusive-icons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Elusive Icons --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="elusiveicon" role="iconpicker"></div>
</div>
<div class="tab-pane" id="materialdesign">
<p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>material-design-iconic-font.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Material Design CDN --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"</span><span class="nt">/></span>
<span class="c"><!-- Bootstrap-Iconpicker --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/></span>
</code>
</pre>
</div>
<p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code> and <code>bootstrap-iconpicker.bundle.min.js</code></p>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- jQuery CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap CDN --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">></span><span class="nt"></script></span>
<span class="c"><!-- Bootstrap-Iconpicker Bundle --></span>
<span class="nt"><script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.bundle.min.js"</span><span class="nt">></span><span class="nt"></script></span>
</code>
</pre>
</div>
<p>Result</p>
<div data-iconset="materialdesign" role="iconpicker"></div>
<div class="bs-callout bs-callout-info">
<h4>Iconset versions availables are:</h4>
<p>
<code>2.2.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css</span></br>
<code>2.1.2</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css</span></br>
<code>2.1.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.1/css/material-design-iconic-font.min.css</span></br>
<code>2.1.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.0/css/material-design-iconic-font.min.css</span></br>
<code>2.0.2</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css</span></br>
<code>2.0.1</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.1/css/material-design-iconic-font.min.css</span></br>
<code>2.0.0</code> <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.0/css/material-design-iconic-font.min.css</span></br>
<code>1.1.1</code> <span class="c">//Deprecated </span>
</p>
</div>
</div>
</div>
<h1 class="page-header">Via data attributes.</h1>
<h4>Initialize.</h4>
<p>Add <code>role="iconpicker"</code> to initialize the iconpicker.</p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-6">
<p><code>button</code></br><code>role="iconpicker"</code></p>
<button class="btn btn-default" role="iconpicker"></button>
</div>
<div class="col-md-6">
<p><code>div</code></br><code>role="iconpicker"</code></p>
<div role="iconpicker"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Button tag --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Div tag --></span>
<span class="nt"><div</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span></code>
</pre>
</div>
<div class="bs-callout bs-callout-info">
<h4>Use iconpicker in a form</h4>
<p>Just add attribute <code class="code-default">name=""</code> in button tag or div tag.</p>
</div>
<h4>Set Iconset, Iconset Version and Icon Selected.</h4>
<p>Add <code>data-iconset="glyphicon|ionicon|fontawesome4|fontawesome5|weathericon|mapicon|octicon|typicon|elusiveicon|flagicon"</code> to idicates the iconset. <small>Default: <code class="code-default">data-iconset="fontawesome5"</code></small></p>
<p>Add <code>data-iconset-version=""</code> to idicates the iconset version. <small>Default: <code class="code-default">data-iconset="lastest"</code></small></p>
<p>Add <code>data-icon=""</code> to select an icon. <small>Default: <code class="code-default">data-icon=""</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-6">
<p><code>data-iconset="glyphicon"</code></br><code>data-icon="glyphicon-camera"</code></p>
<button class="btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>
</div>
<div class="col-md-6">
<p><code>data-iconset="ionicon"</code></br><code>data-icon="ion-ionic"</code></p>
<button class="btn btn-default" data-iconset="ionicon" data-icon="ion-ionic" role="iconpicker"></button>
</div>
</div>
<div class="row text-center" style="padding-top: 12px;">
<div class="col-md-6">
<p><code>data-iconset="fontawesome5"</code></br><code>data-icon="fas fa-wifi"</code></p>
<button class="btn btn-default" data-iconset="fontawesome5" data-icon="fas fa-wifi" role="iconpicker"></button>
</div>
<div class="col-md-6">
<p><code>data-iconset="weathericon"</code></br><code>data-icon="wi-day-rain"</code></p>
<button class="btn btn-default" data-iconset="weathericon" data-icon="wi-day-rain" role="iconpicker"></button>
</div>
</div>
<div class="row text-center" style="padding-top: 12px;">
<div class="col-md-6">
<p><code>data-iconset="mapicon"</code></br><code>data-icon="map-icon-walking"</code></p>
<button class="btn btn-default" data-iconset="mapicon" data-icon="map-icon-walking" role="iconpicker"></button>
</div>
<div class="col-md-6">
<p><code>data-iconset="octicon"</code></br><code>data-icon="octicon-bug"</code></p>
<button class="btn btn-default" data-iconset="octicon" data-icon="octicon-bug" role="iconpicker"></button>
</div>
</div>
<div class="row text-center" style="padding-top: 12px;">
<div class="col-md-6">
<p><code>data-iconset="typicon"</code></br><code>data-icon="typcn-anchor"</code></p>
<button class="btn btn-default" data-iconset="typicon" data-icon="typcn-anchor" role="iconpicker"></button>
</div>
<div class="col-md-6">
<p><code>data-iconset="elusiveicon"</code></br><code>data-icon="el-icon-female"</code></p>
<button class="btn btn-default" data-iconset="elusiveicon" data-icon="el-icon-female" role="iconpicker"></button>
</div>
</div>
<div class="row text-center" style="padding-top: 12px;">
<div class="col-md-6">
<p><code>data-iconset="materialdesign"</code></br><code>data-icon="zmdi-card-sd"</code></p>
<button class="btn btn-default" data-iconset="materialdesign" data-icon="zmdi-card-sd" role="iconpicker"></button>
</div>
<div class="col-md-6">
<p><code>data-iconset="flagicon"</code></br><code>data-icon="flag-icon-mx"</code></p>
<button class="btn btn-default" data-iconset="flagicon" data-icon="flag-icon-mx" role="iconpicker"></button>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"glyphicon"</span> <span class="na">data-icon=</span><span class="s">"glyphicon-camera"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"ionicon"</span> <span class="na">data-icon=</span><span class="s">"ion-ionic"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 3 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"fontawesome5"</span> <span class="na">data-icon=</span><span class="s">"fas fa-wifi"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 4 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"weathericon"</span> <span class="na">data-icon=</span><span class="s">"wi-day-rain"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 5 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"mapicon"</span> <span class="na">data-icon=</span><span class="s">"map-icon-walking"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 6 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"octicon"</span> <span class="na">data-icon=</span><span class="s">"octicon-bug"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 7 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"typicon"</span> <span class="na">data-icon=</span><span class="s">"typcn-anchor"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 8 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"elusiveicon"</span> <span class="na">data-icon=</span><span class="s">"el-icon-female"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 9 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"materialdesign"</span> <span class="na">data-icon=</span><span class="s">"zmdi-card-sd"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 10 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"flagicon"</span> <span class="na">data-icon=</span><span class="s">"flag-icon-mx"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
</code>
</pre>
</div>
<div class="bs-callout bs-callout-info">
<h4>Iconset file</h4>
<p>Should review the <strong>configuration</strong> for each <strong>iconset</strong>.</p>
</div>
<h4>Set Search Input.</h4>
<p>Add <code>data-search="true|false"</code> to show or hide the search field. <small>Default: <code class="code-default">data-search="true"</code></small></p>
<p>Add <code>data-search-text=""</code> to indicate initial search text. <small>Default: <code class="code-default">data-search-text="Search icon"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-6">
<p><code>data-search="true"</code></br><code>data-search-text="Search..."</code></p>
<div data-search="true" data-search-text="Search..." role="iconpicker"></div>
</div>
<div class="col-md-6">
<p><code>data-search="false"</code></p>
<div data-search="false" role="iconpicker"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><div</span> <span class="na">data-search=</span><span class="s">"true"</span> <span class="na">data-search-text=</span><span class="s">"Search..."</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><div</span> <span class="na">data-search=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
</code>
</pre>
</div>
<h4>Set Labels.</h4>
<p>Add <code>data-header="true|false"</code> to show or hide the header. <small>Default: <code class="code-default">data-header="true"</code></small></p>
<p>Add <code>data-label-header=""</code> to indicate header text. <small>Default: <code class="code-default">data-label-header="{0} / {1}"</code></small></p>
<p>Add <code>data-footer="true|false"</code> to show or hide the footer. <small>Default: <code class="code-default">data-footer="true"</code></small></p>
<p>Add <code>data-label-footer=""</code> to indicate footer text. <small>Default: <code class="code-default">data-label-footer="{0} - {1} of {2}"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-6">
<p><code>data-label-header="{0} - {1} pages"</code></br><code>data-label-footer="{0} - {1} of {2} icons"</code></p>
<div data-cols="5" data-label-header="{0} - {1} pages" data-label-footer="{0} - {1} of {2} icons" role="iconpicker"></div>
</div>
<div class="col-md-6">
<p><code>data-header="false"</code></br><code>data-footer="false"</code></p>
<div data-cols="5" data-header="false" data-footer="false" role="iconpicker"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><div</span> <span class="na">data-label-header=</span><span class="s">"{0} - {1} pages"</span> <span class="na">data-label-footer=</span><span class="s">"{0} - {1} of {2} icons"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><div</span> <span class="na">data-header=</span><span class="s">"false"</span> <span class="na">data-footer=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
</code>
</pre>
</div>
<h4>Set Rows and Columns.</h4>
<p>Add <code>data-rows=""</code> to indicates the rows to showing in iconpicker. <small>Default: <code class="code-default">data-rows="4"</code></small></p>
<p>Add <code>data-cols=""</code> to indicates the columns to showing in iconpicker. <small>Default: <code class="code-default">data-cols="4"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-12">
<p><code>data-rows="3"</code></br><code>data-cols="6"</code></p>
<div data-rows="3" data-cols="6" role="iconpicker"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="nt"><div</span> <span class="na">data-rows=</span><span class="s">"3"</span> <span class="na">data-cols=</span><span class="s">"6"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span></code>
</pre>
</div>
<h4>Set Align. (Only in div tag)</h4>
<p>Add <code>data-align="left|center|right"</code> to indicate the align. <small>Default: <code class="code-default">data-align="center"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-4">
<p><code>data-align="left"</code></p>
<div data-align="left" role="iconpicker"></div>
</div>
<div class="col-md-4">
<p><code>data-align="center"</code></p>
<div data-align="center" role="iconpicker"></div>
</div>
<div class="col-md-4">
<p><code>data-align="right"</code></p>
<div data-align="right" role="iconpicker"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><div</span> <span class="na">data-align=</span><span class="s">"left"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><div</span> <span class="na">data-align=</span><span class="s">"center"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
<span class="c"><!-- Example 3 --></span>
<span class="nt"><div</span> <span class="na">data-align=</span><span class="s">"right"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span>
</code>
</pre>
</div>
<h4>Set Placement. (Only in button tag)</h4>
<p>Add <code>data-placement="left|top|bottom|right"</code> to indicate where the iconpicker will be display. <small>Default: <code class="code-default">data-placement="bottom"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-3">
<p><code>data-placement="left"</code></p>
<button class="btn btn-default" data-icon="fas fa-arrow-left" data-placement="left" role="iconpicker"></button>
</div>
<div class="col-md-3">
<p><code>data-placement="top"</code></p>
<button class="btn btn-default" data-icon="fas fa-arrow-up" data-placement="top" role="iconpicker"></button>
</div>
<div class="col-md-3">
<p><code>data-placement="bottom"</code></p>
<button class="btn btn-default" data-icon="fas fa-arrow-down" data-placement="bottom" role="iconpicker"></button>
</div>
<div class="col-md-3">
<p><code>data-placement="right"</code></p>
<button class="btn btn-default" data-icon="fas fa-arrow-right" data-placement="right" role="iconpicker"></button>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"left"</span> <span class="na">data-icon=</span><span class="s">"fas fa-arrow-left"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">data-icon=</span><span class="s">"fas fa-arrow-up"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 3 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">data-icon=</span><span class="s">"fas fa-arrow-down"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 4 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">data-icon=</span><span class="s">"fas fa-arrow-right"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
</code>
</pre>
</div>
<h4>Set Style Navigations Buttons.</h4>
<p>Add <code>data-arrow-class=""</code> to indicate the class of the arrows. <small>Default: <code class="code-default">data-arrow-class="btn-primary"</code></small></p>
<p>Add <code>data-arrow-prev-icon-class=""</code> to indicates the class icon previous arrow. <small>Default: <code class="code-default">data-arrow-prev-icon-class="fas fa-arrow-left"</code></small></p>
<p>Add <code>data-arrow-next-icon-class=""</code> to indicates the class icon next arrow. <small>Default: <code class="code-default">data-arrow-next-icon-class="fas fa-arrow-right"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-12">
<p><code>data-arrow-class="btn-success"</code></br><code>data-arrow-prev-icon-class="fas fa-angle-left"</code></br><code>data-arrow-next-icon-class="fas fa-angle-right"</code></p>
<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>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="nt"><div</span> <span class="na">data-arrow-class=</span><span class="s">"btn-success"</span> <span class="na">data-arrow-prev-icon-class=</span><span class="s">"fas fa-angle-left"</span> <span class="na">data-arrow-next-icon-class=</span><span class="s">"fas fa-angle-right"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span></code>
</pre>
</div>
<h4>Set Style Icons Buttons.</h4>
<p>Add <code>data-selected-class=""</code> to indicate the class of the selected icon. <small>Default: <code class="code-default">data-selected-class="btn-warning"</code></small></p>
<p>Add <code>data-unselected-class=""</code> to indicate unselected icons. <small>Default: <code class="code-default">data-unselected-class="btn-secondary"</code></small></p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-12">
<p><code>data-selected-class="btn-danger"</code></br><code>data-unselected-class="btn-info"</code></p>
<div data-selected-class="btn-danger" data-unselected-class="btn-info" role="iconpicker"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="nt"><div</span> <span class="na">data-selected-class=</span><span class="s">"btn-danger"</span> <span class="na">data-unselected-class=</span><span class="s">"btn-info"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></div></span></code>
</pre>
</div>
<h4>Button Style.</h4>
<p>Add in <code>class=""</code> your custom style.</p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-4">
<p><code>class="btn btn-default"</code></p>
<button class="btn btn-default" data-iconset="fontawesome5" data-icon="fab fa-jsfiddle" role="iconpicker"></button>
</div>
<div class="col-md-4">
<p><code>class="btn btn-primary"</code></p>
<button class="btn btn-primary" data-iconset="fontawesome5" data-icon="fab fa-facebook" role="iconpicker"></button>
</div>
<div class="col-md-4">
<p><code>class="btn btn-success"</code></p>
<button class="btn btn-success" data-iconset="fontawesome5" data-icon="fab fa-html5" role="iconpicker"></button>
</div>
</div>
<div class="row text-center" style="padding-top: 12px;">
<div class="col-md-4">
<p><code>class="btn btn-warning"</code></p>
<button class="btn btn-warning" data-iconset="fontawesome5" data-icon="fab fa-stack-overflow" role="iconpicker"></button>
</div>
<div class="col-md-4">
<p><code>class="btn btn-danger"</code></p>
<button class="btn btn-danger" data-iconset="fontawesome5" data-icon="fab fa-youtube" role="iconpicker"></button>
</div>
<div class="col-md-4">
<p><code>class="btn btn-info"</code></p>
<button class="btn btn-info" data-iconset="fontawesome5" data-icon="fab fa-twitter" role="iconpicker"></button>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-icon=</span><span class="s">"fab fa-jsfiddle"</span><span class="nt"> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-icon=</span><span class="s">"fab fa-facebook"</span><span class="nt"> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 3 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-success"</span> <span class="na">data-icon=</span><span class="s">"fab fa-html5"</span><span class="nt"> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 4 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span> <span class="na">data-icon=</span><span class="s">"fab fa-stack-overflow"</span><span class="nt"> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 5 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">data-icon=</span><span class="s">"fab fa-youtube"</span><span class="nt"> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="c"><!-- Example 6 --></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-info"</span> <span class="na">data-icon=</span><span class="s">"fab fa-twitter"</span><span class="nt"> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
</code>
</pre>
</div>
<h4>Button addons.</h4>
<p>You can include it in a <code>class="input-group"</code>.</p>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-4 col-md-offset-2">
<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>
</div>
<div class="col-md-4">
<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>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c"><!-- Example 1 --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-icon=</span><span class="s">"fas fa-map-marker-alt"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="nt"></span></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">value=</span><span class="s">"My marker"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="c"><!-- Example 2 --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">value=</span><span class="s">"My house"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-icon=</span><span class="s">"fas fa-home"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">></span><span class="nt"></button></span>
<span class="nt"></span></span>
<span class="nt"></div></span>
</code>
</pre>
</div>
<h1 class="page-header">Via JavaScript</h1>
<h4>Initialize.</h4>
<h4><small><code class="code-options">.iconpicker(options)</code> Initializes an iconpicker with options.</small></h4>
<h4>Options.</h4>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-align=""</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 200px;">Name</th>
<th style="width: 120px;">Type</th>
<th style="width: 300px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="code-options">align</code></td>
<td>String</td>
<td><code class="code-default">'center'</code></td>
<td>(Only in div tag) Align of the iconpicker.</td>
</tr>
<tr>
<td><code class="code-options">arrowClass</code></td>
<td>String</td>
<td><code class="code-default">'btn-primary'</code></td>
<td>Class of the arrows.</td>
</tr>
<tr>
<td><code class="code-options">arrowPrevIconClass</code></td>
<td>String</td>
<td><code class="code-default">'fas fa-arrow-left'</code></td>
<td>Icon class of the previous arrow.</td>
</tr>
<tr>
<td><code class="code-options">arrowNextIconClass</code></td>
<td>String</td>
<td><code class="code-default">'fas fa-arrow-right'</code></td>
<td>Icon class of the next arrow.</td>
</tr>
<tr>
<td><code class="code-options">cols</code></td>
<td>Integer</td>
<td><code class="code-default">4</td>
<td>Number of columns to display in the iconpicker. Min value is: <code class="code-info">4</code></td>
</tr>
<tr>
<td><code class="code-options">footer</code></td>
<td>Boolean</td>
<td><code class="code-default">true</code></td>
<td>Indicates whether to show or hide the footer. <code class="code-info">true|false</code></td>
</tr>
<tr>
<td><code class="code-options">header</code></td>
<td>Boolean</td>
<td><code class="code-default">true</code></td>
<td>Indicates whether to show or hide the header. <code class="code-info">true|false</code></td>
</tr>
<tr>
<td><code class="code-options">icon</code></td>
<td>String</td>
<td><code class="code-default">''</code></td>
<td>Selected icon.</td>
</tr>
<tr>
<td><code class="code-options">iconset</code></td>
<td>String | Object</td>
<td><code class="code-default">'fontawesome5'</code></td>
<td>Selected iconset. <code class="code-info">glyphicon|ionicon|fontawesome4|fontawesome5|weathericon|mapicon|octicon|typicon|elusiveicon</code></br>
Object structure is:</br>
<code class="code-info">{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }</code>
</td>
</tr>
<tr>
<td><code class="code-options">labelHeader</code></td>
<td>String</td>
<td><code class="code-default">'{0} / {1}'</code></td>
<td>Header text.</td>
</tr>
<tr>
<td><code class="code-options">labelFooter</code></td>
<td>String</td>
<td><code class="code-default">'{0} - {1} of {2}'</code></td>
<td>Footer text.</td>
</tr>
<tr>
<td><code class="code-options">placement</code></td>
<td>String</td>
<td><code class="code-default">'bottom'</code></td>
<td>(Only in button tag) Where the iconpicker will be display. <code class="code-info">left|top|bottom|right</code></td>
</tr>
<tr>
<td><code class="code-options">rows</code></td>
<td>Integer</td>
<td><code class="code-default">4</td>
<td>Number of rows to display in the iconpicker. Value <code class="code-info">0</code> indicates all rows.</td>
</tr>
<tr>
<td><code class="code-options">search</code></td>
<td>Boolean</td>
<td><code class="code-default">true</code></td>
<td>Indicates whether to show or hide the search field. <code class="code-info">true|false</code></td>
</tr>
<tr>
<td><code class="code-options">searchText</code></td>
<td>String</td>
<td><code class="code-default">'Search icon'</code></td>
<td>Text of search field.</td>
</tr>
<tr>
<td><code class="code-options">selectedClass</code></td>
<td>String</td>
<td><code class="code-default">'btn-warning'</code></td>
<td>Class of the selected icon.</td>
</tr>
<tr>
<td><code class="code-options">unselectedClass</code></td>
<td>String</td>
<td><code class="code-default">'btn-secondary'</code></td>
<td>Class of the icons unselected.</td>
</tr>
</tbody>
</table>
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-12">
<div id="convert_example_1"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="c">// Default options</span>
<span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).iconpicker();</span>
<span class="c">// Custom options</span>
<span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).iconpicker({</span>
<span class="o">align: </span><span class="s">'center'</span>, <span class="c">// Only in div tag</span>
<span class="o">arrowClass: </span><span class="s">'btn-danger'</span>,
<span class="o">arrowPrevIconClass: </span><span class="s">'fas fa-angle-left'</span>,
<span class="o">arrowNextIconClass: </span><span class="s">'fas fa-angle-right'</span>,
<span class="o">cols: </span><span class="nx">10</span>,
<span class="o">footer: </span><span class="na">true</span>,
<span class="o">header: </span><span class="na">true</span>,
<span class="o">icon: </span><span class="s">'fas fa-bomb'</span>,
<span class="o">iconset: </span><span class="s">'fontawesome5'</span>,
<span class="o">labelHeader: </span><span class="s">'{0} of {1} pages'</span>,
<span class="o">labelFooter: </span><span class="s">'{0} - {1} of {2} icons'</span>,
<span class="o">placement: </span><span class="s">'bottom'</span>, <span class="c">// Only in button tag</span>
<span class="o">rows: </span><span class="nx">5</span>,
<span class="o">search: </span><span class="na">true</span>,
<span class="o">searchText: </span><span class="s">'Search'</span>,
<span class="o">selectedClass: </span><span class="s">'btn-success'</span>,
<span class="o">unselectedClass: </span><span class="s">''</span>
<span class="nx">});</span>
</code>
</pre>
</div>
<h4>Events.</h4>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 400px;">Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>.on(<code class="code-event">'change'</code>, function(e){})</td>
<td>This event fires when select an icon.</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-6">
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-12">
<button id="convert_example_2" class="btn btn-primary" data-placement="right" style="margin-left: 30px;"></button>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).on(<span class="s">'change'</span>, function(e) {</span>
<span class="nx">console.log(e.icon);</span>
<span class="nx">});</span>
</code>
</pre>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><i class="octicon octicon-terminal"></i> Console</div>
<div id="console" class="panel-body"></div>
</div>
</div>
</div>
<h4>Methods.</h4>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 400px;">Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>.iconpicker(<code class="code-method">'setAlign'</code>, String)</td>
<td>(Only in div tag) Sets align of the iconpicker. <code class="code-info">left|center|right</code></td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setArrowClass'</code>, String)</td>
<td>Sets class of the arrows.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setArrowPrevIconClass'</code>, String)</td>
<td>Sets icon class of the previous arrow.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setArrowNextIconClass'</code>, String)</td>
<td>Sets icon class of the next arrow.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setCols'</code>, Integer)</td>
<td>
Sets the columns to display in the iconpicker. Min value is: <code class="code-info">4</code>
</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setFooter'</code>, Boolean)</td>
<td>Sets whether to show or hide the footer. <code class="code-info">true|false</code></td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setHeader'</code>, Boolean)</td>
<td>Sets whether to show or hide the header. <code class="code-info">true|false</code></td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setIcon'</code>, String)</td>
<td>Sets an icon.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setIconset'</code>, String | Object)</td>
<td>
Sets an iconset. <code class="code-info">glyphicon|ionicon|fontawesome4|fontawesome5|weathericon|mapicon|octicon|typicon|elusiveicon</code></br>
Object structure is:</br>
<code class="code-info">{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }</code>
</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setLabelHeader'</code>, String)</td>
<td>Sets header text.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setLabelFooter'</code>, String)</td>
<td>Sets footer text.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setPlacement'</code>, String)</td>
<td>(Only in button tag) Sets where the iconpicker will be display. <code class="code-info">left|top|bottom|right</code></td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setRows'</code>, Integer)</td>
<td>
Sets the rows to display in the iconpicker. Value = <code class="code-info">0</code> indicates all rows.
</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setSearch'</code>, Boolean)</td>
<td>Sets whether to show or hide the search field. <code class="code-info">true|false</code></td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setSearchText'</code>, String)</td>
<td>Sets the text search field.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setSelectedClass'</code>, String)</td>
<td>Sets class of the selected icon.</td>
</tr>
<tr>
<td>.iconpicker(<code class="code-method">'setUnselectedClass'</code>, String)</td>
<td>Sets class of the icons unselected.</td>
</tr>
</tbody>
</table>
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row text-center">
<div class="col-md-12">
<div id="convert_example_3"></div>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code class="html"><span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).iconpicker()</span>
<span class="nx">.iconpicker(</span><span class="s">'setAlign'</span><span class="nx">, </span><span class="s">'center'</span><span class="nx">)</span> <span class="c">// Only in div tag</span>
<span class="nx">.iconpicker(</span><span class="s">'setArrowClass'</span><span class="nx">, </span><span class="s">'btn-success'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setArrowPrevIconClass'</span><span class="nx">, </span><span class="s">'fas fa-angle-left'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setArrowNextIconClass'</span><span class="nx">, </span><span class="s">'fas fa-angle-right'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setCols'</span><span class="nx">, </span><span class="nx">9</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setFooter'</span><span class="nx">, </span><span class="na">true</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setHeader'</span><span class="nx">, </span><span class="na">true</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setIconset'</span><span class="nx">, {</span>
<span class="o">iconClass: </span><span class="s">'fas'</span>,
<span class="o">iconClassFix: </span><span class="s">'fa-'</span>,
<span class="o">icons: </span><span class="nx">[</span>
<span class="s">'fast-backward'</span>,
<span class="s">'step-backward'</span>,
<span class="s">'backward'</span>,
<span class="s">'play'</span>,
<span class="s">'pause'</span>,
<span class="s">'stop'</span>,
<span class="s">'forward'</span>,
<span class="s">'step-forward'</span>,
<span class="s">'fast-forward'</span>
<span class="nx">]</span>
<span class="nx">})</span>
<span class="nx">.iconpicker(</span><span class="s">'setIcon'</span><span class="nx">, </span><span class="s">'fa-pause'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setLabelHeader'</span><span class="nx">, </span><span class="s">'{0} of {1} pages'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setLabelFooter'</span><span class="nx">, </span><span class="s">'{0} - {1} of {2} icons'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setPlacement'</span><span class="nx">, </span><span class="s">'bottom'</span><span class="nx">)</span> <span class="c">// Only in button tag</span>
<span class="nx">.iconpicker(</span><span class="s">'setRows'</span><span class="nx">, </span><span class="nx">0</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setSearch'</span><span class="nx">, </span><span class="na">true</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setSearchText'</span><span class="nx">, </span><span class="s">'Type text'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setSelectedClass'</span><span class="nx">, </span><span class="s">'btn-danger'</span><span class="nx">)</span>
<span class="nx">.iconpicker(</span><span class="s">'setUnselectedClass'</span><span class="nx">, </span><span class="s">'btn-primary'</span><span class="nx">);</span>
</code>
</pre>
</div>
<h1 class="page-header">See in action. <small>Button Builder.</small></h1>
<div class="bs-example" style="padding-bottom: 24px;">
<div class="row">
<div class="col-md-4">
<div id="button" class="well text-center" data-position="left" style="height: 290px; padding-top: 120px;">
<a href="#" class="btn btn-default"><i class="fas fa-chart-area"></i> Button text</a>
</div>
</div>
<div class="col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="btn-text" class="col-sm-2 control-label">Text: </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="btn-text" placeholder="Button Text" value="Button Text">
</div>
</div>
<div class="form-group">
<label for="btn-color" class="col-sm-2 control-label">Color: </label>
<div class="col-sm-10">
<div id="btn-colors" class="btn-group">
<button name="color" type="button" class="btn btn-default" value="btn-default">Default</button>
<button name="color" type="button" class="btn btn-primary" value="btn-primary">Primary</button>
<button name="color" type="button" class="btn btn-info" value="btn-info">Info</button>
<button name="color" type="button" class="btn btn-success" value="btn-success">Success</button>
<button name="color" type="button" class="btn btn-warning" value="btn-warning">Warning</button>
<button name="color" type="button" class="btn btn-danger" value="btn-danger">Danger</button>
</div>
</div>
</div>
<div class="form-group">
<label for="btn-color" class="col-sm-2 control-label">Size: </label>
<div class="col-sm-10">
<div id="btn-sizes">
<p>
<button class="btn btn-xs btn-default" value="btn-xs" type="button">Mini</button>
<button class="btn btn-sm btn-default" value="btn-sm" type="button">Small</button>
<button class="btn btn-default" value="btn-default" type="button">Default</button>
<button class="btn btn-default btn-lg" value="btn-lg" type="button">Large</button>
</p>
<p>
<a href="#" class="btn btn-default btn-block" data-toggle="button">Full width button</a>
</p>
</div>
</div>
</div>
<div class="form-group">
<label for="btn-color" class="col-sm-2 control-label">Icon: </label>
<div class="col-sm-10">
<div id="btn-icon" data-iconset="fontawesome5" data-icon="fas fa-chart-area"></div>
</div>
</div>
<div class="form-group">
<label for="btn-color" class="col-sm-2 control-label">Icon position: </label>
<div class="col-sm-10">
<div id="btn-icon-positions" class="btn-group">
<button class="btn btn-default" value="left" type="button"><span class="glyphicon glyphicon-arrow-left"></span> Left</button>
<button class="btn btn-default" value="right" type="button">Right <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="highlight">
<pre>
<code id="result" class="html"></code>
</pre>
</div>
<h1 class="page-header">Leave your comments or fixes here.</h1>
<div class="row">
<div class="fb-comments col-md-12 col-xs-12" data-href="http://victor-valencia.github.io/bootstrap-iconpicker/index.html" data-numposts="5" data-colorscheme="light"></div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>
<script type="text/javascript">
$(function(){
$('#convert_example_1').iconpicker({
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',
rows: 5,
search: true,
searchText: 'Search',
selectedClass: 'btn-success',
unselectedClass: ''
});
$('#convert_example_2').iconpicker().on('change', function(e) {
$("#console").prepend(e.icon+'</br>');
});
$('#convert_example_3')
.iconpicker()
.iconpicker('setAlign', 'center')
.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')
.iconpicker('setRows', 0)
.iconpicker('setSearch', true)
.iconpicker('setSearchText', 'Type text')
.iconpicker('setSelectedClass', 'btn-danger')
.iconpicker('setUnselectedClass', 'btn-primary');
});
</script>
<!-- Button Builder Example -->
<script type="text/javascript">
$(function(){
var show_result = function(){
$('#result').text($('#button').html().trim());
};
show_result();
$('#btn-text').on('focusout', function(e) {
$('#btn-icon-positions button[value="' + $('#button').data('position') + '"]').trigger('click')
show_result();
});
$('#btn-colors button').on('click', function(e) {
$('#button a').removeClass('btn-default btn-primary btn-info btn-success btn-warning btn-danger').addClass($(this).val());
show_result();
});
$('#btn-sizes button').on('click', function(e) {
$('#button a').removeClass('btn-xs btn-sm btn-lg').addClass($(this).val());
show_result();
});
$('#btn-sizes a').on('click', function(e) {
$('#button a').toggleClass('btn-block');
show_result();
});
$('#btn-icon').iconpicker({
rows: 5,
cols: 10,
align: 'left'
});
$('#btn-icon').on('change', function(e) {
$('#button a > i').attr('class', '').addClass(e.icon);
show_result();
});
$('#btn-icon-positions button').on('click', function(e) {
var icon = $('#button a > i');
var text = $('#btn-text').val();
$('#button a').empty();
if($(this).val() == 'left'){
$('#button a').append(icon).append(' ' + text);
}
else{
$('#button a').append(text + ' ').append(icon);
}
$('#button').data('position', $(this).val());
show_result();
});
});
</script>
<script type="text/javascript">
$(function(){
$('#btnDonate').bind('click', function(e){
e.preventDefault();
$('#formDonate').submit();
});
$.getJSON( "https://api.github.com/repos/victor-valencia/bootstrap-iconpicker", function( data ) {
$('#btnStars').html(data.stargazers_count);
$('#btnForks').html(data.forks_count);
});
$.getJSON( "https://api.github.com/repos/victor-valencia/bootstrap-iconpicker/tags", function( data ) {
$('#btnReleases').html(data.length);
var url = "https://github.com/victor-valencia/bootstrap-iconpicker/archive/" + data[0].name;
$('#btnGithub').html($('#btnGithub').html().replace('{0}', data[0].name));
$('#btnDownloadZip').attr('href', url + '.zip');
$('#btnDownloadZip').html($('#btnDownloadZip').html().replace('{0}', data[0].name));
$('#btnDownloadTar').attr('href', url + '.tar.gz');
$('#btnDownloadTar').html($('#btnDownloadTar').html().replace('{0}', data[0].name));
});
$.getJSON( "https://api.github.com/repos/victor-valencia/bootstrap-iconpicker/contributors", function( data ) {
$('#btnContributors').html(data.length);
});
$('[role="menu"] a').on('click', function(){
$("#tabConfig").html($(this).html() + ' <span class="caret"></span>');
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38890641-4', 'auto');
ga('send', 'pageview');
</script>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>