[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
bem
/
assets
/
fa-picker
/
[
Home
]
File: index.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>