mirror of
https://github.com/a2nt/silverstripe-font-awesome.git
synced 2024-10-22 15:05:51 +00:00
256 lines
13 KiB
HTML
256 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Font Awesome Icon Picker plugin for Bootstrap</title>
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.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: 600px;
|
|
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,<br> based on
|
|
<a href="http://mjolnic.github.io/bootstrap-popover-picker" target="_blank">Bootstrap Popover Picker</a>
|
|
</p>
|
|
<div class="lead">
|
|
<iframe class="inl-bl" src="http://ghbtns.com/github-btn.html?user=mjolnic&repo=fontawesome-iconpicker&type=watch&count=true&size=large"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="125" height="30"></iframe>
|
|
<iframe class="inl-bl" src="http://ghbtns.com/github-btn.html?user=mjolnic&repo=fontawesome-iconpicker&type=fork&count=true&size=large"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="125" height="30"></iframe>
|
|
|
|
<a class="btn btn-primary" href="https://github.com/mjolnic/fontawesome-iconpicker/archive/1.0.0.zip">
|
|
<i class="fa-download fa"></i> Download
|
|
</a>
|
|
|
|
<form style="display:inline-block; margin:0 10px;" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
<input type="hidden" name="hosted_button_id" value="V5R7NXUNJS7KJ">
|
|
<button type="submit" name="submit" class="btn btn-warning"><i class="fa fa-heart"></i> Donate</button>
|
|
<img alt="" border="0" src="https://www.paypalobjects.com/es_ES/i/scr/pixel.gif" width="1" height="1">
|
|
</form>
|
|
</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-github 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="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="fa-archive" type="text" />
|
|
<span class="input-group-addon"></span>
|
|
</div>
|
|
</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</label>
|
|
<input class="form-control icp icp-opts" value="fa-github" type="text" />
|
|
<pre class="well">
|
|
{
|
|
//...
|
|
title: 'With custom options',
|
|
icons: ['github', 'heart', 'html5', 'css3'],
|
|
selectedCustomClass: 'label label-success',
|
|
mustAccept:true,
|
|
placement:'bottomRight',
|
|
showFooter:true,
|
|
//... (see the source code of this page)
|
|
}</pre>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Inside dropdowns</label>
|
|
<div class="btn-group">
|
|
<button type="button" class="icp icp-dd btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
Dropdown
|
|
<span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu"></div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-primary">Action</button>
|
|
<button type="button" class="icp icp-dd btn btn-primary dropdown-toggle" 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>Using a custom icon font (default Bootstrap glyphicons)</label>
|
|
<input class="form-control icp icp-glyphs" value="" type="text" />
|
|
<pre class="well">
|
|
{
|
|
//...
|
|
icons:['home', 'repeat', 'search',
|
|
'arrow-left', 'arrow-right', 'star'],
|
|
iconBaseClass:'glyphicon',
|
|
iconComponentBaseClass:'glyphicon',
|
|
iconClassPrefix:'glyphicon-'
|
|
//...
|
|
}</pre>
|
|
</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 Javier Aguilar <a href="http://mjolnic.com" target="_blank">@mjolnic</a>
|
|
</footer>
|
|
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/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').each(function() {
|
|
var $this = $(this);
|
|
$this.iconpicker({
|
|
title: 'Dropdown with picker',
|
|
container: $(' ~ .dropdown-menu:first', $this)
|
|
});
|
|
});
|
|
$('.icp-glyphs').iconpicker({
|
|
title: 'Using glypghicons',
|
|
icons: ['home', 'repeat', 'search',
|
|
'arrow-left', 'arrow-right', 'star'],
|
|
iconBaseClass: 'glyphicon',
|
|
iconComponentBaseClass: 'glyphicon',
|
|
iconClassPrefix: 'glyphicon-'
|
|
});
|
|
$('.icp-opts').iconpicker({
|
|
title: 'With custom options',
|
|
icons: ['github', 'heart', 'html5', 'css3'],
|
|
selectedCustomClass: 'label label-success',
|
|
mustAccept: true,
|
|
placement: 'bottomRight',
|
|
showFooter: true,
|
|
// note that this is ignored cause we have an accept button:
|
|
hideOnSelect: 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.getValue(e.iconpickerValue);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |