@assuradeurengilde/fontawesome-iconpicker
Version:
Font Awesome Icon Picker plugin for Twitter Bootstrap
313 lines (289 loc) • 11.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Icon Picker plugin for Bootstrap</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85082661-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-85082661-5');
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<link href="dist/css/fontawesome-iconpicker.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
footer {
font-style: italic;
background: #f7f7f7;
padding: 60px;
text-align: center;
margin-top: 60px;
}
pre {
text-align: left;
}
.form-control, .form-group {
position: relative;
}
p.lead {
max-width: 800px;
margin: 0 auto 20px auto;
}
div.lead {
margin: 30px 0;
}
a.action-placement {
margin: 0 4px 4px 4px;
display: inline-block;
/*border-bottom: 1px dotted #428BCA;*/
text-decoration: none;
}
a.action-placement.active {
color: #5CB85C;
}
.form-group {
text-align: left;
margin-bottom: 30px;
}
.form-group label {
display: block;
margin-bottom: 15px;
}
.lead iframe {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container" style="text-align: center">
<h1 class="page-header">Font Awesome Icon Picker</h1>
<p class="lead">
Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap,
with a powerful base API, based on
<a href="https://itsjavi.com/bootstrap-popover-picker" target="_blank">Bootstrap Popover Picker</a>
</p>
<div class="lead">
<a class="btn btn-warning" href="https://github.com/itsjavi/fontawesome-iconpicker">
<i class="fab fa-github"></i> Source Code
</a>
<a class="btn btn-primary" href="https://github.com/itsjavi/fontawesome-iconpicker/releases">
<i class="fas fa-download"></i> Download
</a>
<a class="btn btn-primary" target="_blank"
href="https://chrome.google.com/webstore/detail/font-awesome-icon-picker/mcepmpclbgahgbpcgbmnpplcfmlaiopm">
<i class="fas fa-puzzle-piece"></i> Chrome extension
</a>
<a class="btn btn-success" href="https://github.com/itsjavi/itsjavi.github.io/blob/master/BACKERS.md#sponsors--backers">
<i class="far fa-heart"></i> Donate
</a>
<a class="btn btn-default"
href="https://github.com/itsjavi/itsjavi.github.io/blob/master/BACKERS.md#sponsors">
<i class="fas fa-star"></i> Supporters
</a>
</div>
<p class="lead">
You can use Font Awesome or another font icon set of your choice (icon options and items are customizable).
</p>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Demos</h2>
</div>
<div class="panel-body">
<p class="lead">
<i class="fa fa-graduation-cap fa-3x picker-target"></i>
</p>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Default</label>
<input class="form-control icp icp-auto" value="fas fa-anchor" type="text"/>
</div>
<div class="form-group">
<label>As a component</label>
<div class="input-group">
<input data-placement="bottomRight" class="form-control icp icp-auto" value="fas fa-archive"
type="text"/>
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-group">
<label>With the input as a search box</label>
<input class="form-control icp icp-auto" data-input-search="true" value="fas fa-plane"
type="text"/>
</div>
<div class="form-group">
<label>Inside dropdowns</label>
<div class="btn-group">
<button data-selected="graduation-cap" type="button"
class="icp icp-dd btn btn-default dropdown-toggle iconpicker-component"
data-toggle="dropdown">
Dropdown <i class="fa fa-fw"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu"></div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary iconpicker-component"><i
class="fa fa-fw fa-heart"></i></button>
<button type="button" class="icp icp-dd btn btn-primary dropdown-toggle"
data-selected="fa-car" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu"></div>
</div>
<p class="help-block"><br>
Note: In dropdowns the placement is controlled by the Bootstrap dropdown plugin
</p>
</div>
<div class="form-group">
<label data-title="Inline picker" data-placement="inline" class="icp icp-auto"
data-selected="fa-align-justify">
Inline mode, without input:
</label>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<label>With custom options, e.g. a subset of icons</label>
<input class="form-control icp icp-opts" value="fab fa-github" type="text"/><br>
<pre class="well">
{
//...
title: 'With custom options',
icons: [
{
title: "fab fa-github",
searchTerms: ['repository', 'code']
},
{
title: "fas fa-heart",
searchTerms: ['love']
},
{
title: "fab fa-html5",
searchTerms: ['web']
},
{
title: "fab fa-css3",
searchTerms: ['style']
}
],
selectedCustomClass: 'label label-success',
mustAccept:true,
placement:'bottomRight',
showFooter:true,
//... (see the source code of this page)
}</pre>
<p class="help-block"><br>
Tip: You can use any font library of your choice and add the icons this way,
mix them up with Font Awesome icons, etc.
</p>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-danger action-destroy">Destroy instances</button>
<button class="btn btn-default action-create">Create instances</button>
</div>
</div>
</div>
<footer>
created by <a href="https://itsjavi.com" target="_blank">Javi Aguilar</a>
</footer>
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/js/fontawesome-iconpicker.js"></script>
<script>
$(function () {
$('.action-destroy').on('click', function () {
$.iconpicker.batch('.icp.iconpicker-element', 'destroy');
});
// Live binding of buttons
$(document).on('click', '.action-placement', function (e) {
$('.action-placement').removeClass('active');
$(this).addClass('active');
$('.icp-opts').data('iconpicker').updatePlacement($(this).text());
e.preventDefault();
return false;
});
$('.action-create').on('click', function () {
$('.icp-auto').iconpicker();
$('.icp-dd').iconpicker({
//title: 'Dropdown with picker',
//component:'.btn > i'
});
$('.icp-opts').iconpicker({
title: 'With custom options',
icons: [
{
title: "fab fa-github",
searchTerms: ['repository', 'code']
},
{
title: "fas fa-heart",
searchTerms: ['love']
},
{
title: "fab fa-html5",
searchTerms: ['web']
},
{
title: "fab fa-css3",
searchTerms: ['style']
}
],
selectedCustomClass: 'label label-success',
mustAccept: true,
placement: 'bottomRight',
showFooter: true,
// note that this is ignored cause we have an accept button:
hideOnSelect: true,
// fontAwesome5: true,
templates: {
footer: '<div class="popover-footer">' +
'<div style="text-align:left; font-size:12px;">Placements: \n\
<a href="#" class=" action-placement">inline</a>\n\
<a href="#" class=" action-placement">topLeftCorner</a>\n\
<a href="#" class=" action-placement">topLeft</a>\n\
<a href="#" class=" action-placement">top</a>\n\
<a href="#" class=" action-placement">topRight</a>\n\
<a href="#" class=" action-placement">topRightCorner</a>\n\
<a href="#" class=" action-placement">rightTop</a>\n\
<a href="#" class=" action-placement">right</a>\n\
<a href="#" class=" action-placement">rightBottom</a>\n\
<a href="#" class=" action-placement">bottomRightCorner</a>\n\
<a href="#" class=" active action-placement">bottomRight</a>\n\
<a href="#" class=" action-placement">bottom</a>\n\
<a href="#" class=" action-placement">bottomLeft</a>\n\
<a href="#" class=" action-placement">bottomLeftCorner</a>\n\
<a href="#" class=" action-placement">leftBottom</a>\n\
<a href="#" class=" action-placement">left</a>\n\
<a href="#" class=" action-placement">leftTop</a>\n\
</div><hr></div>'
}
}).data('iconpicker').show();
}).trigger('click');
// Events sample:
// This event is only triggered when the actual input value is changed
// by user interaction
$('.icp').on('iconpickerSelected', function (e) {
$('.lead .picker-target').get(0).className = 'picker-target fa-3x ' +
e.iconpickerInstance.options.iconBaseClass + ' ' +
e.iconpickerInstance.options.fullClassFormatter(e.iconpickerValue);
});
});
</script>
</body>
</html>