--- /dev/null
+<div class="filter-parent">
+ <label for="filter-by" class="fa fa-search"></label>
+ <input placeholder="Filter icons..." id="filter-by">
+ <a href="#" id="filter-clear" class="fa fa-times"></a>
+</div>
+<{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="filter">
+ <h2 class="page-header">Filter for <span class="text-muted" id="filter-val"></span></h2>
+ {% if page.navbar_active != "icons" %}
+ <div class="margin-botom-large">
+ You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
+ Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
+ </div>
+ {% endif %}
+
+ <div class="row fontawesome-icon-list">
+ {% for icon in icons %}
+ <div class="fa-hover col-md-3 col-sm-4 filter-icon"
+ data-filter=" {{ icon.class }}{% for alias in icon.aliases %} {{ alias }}{% endfor %}{% for filter in icon.filter %} {{ filter }}{% endfor %}">
+ <a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> fa-{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a>
+ </div>
+ {% endfor %}
+ </div>
+
+</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>
$('#icon-carousel').carousel({
interval: 5000
});
+
+ // Filter icons
+ if($('#filter-by').length) {
+ var $filter_val = $('#filter-val');
+ var $filter = $('#filter');
+ var $other = $('#new, #web-application, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand');
+ var $clear = $('#filter-clear');
+
+ var $icons = $('.filter-icon', $filter);
+
+ $clear.click(function(e) {
+ e.preventDefault();
+ $('#filter-by').val('').trigger('keyup').focus();
+ });
+
+
+ $('#filter-by').keyup(function() {
+ var $this = $(this);
+ var val = $this.val();
+ $filter.toggle(!!val);
+ $other.toggle(!val);
+ $clear.toggleClass('gone', !val);
+ $filter_val.text(val);
+
+ if(!val) return;
+
+ $icons.each(function() {
+ var show = $(this).attr('data-filter').match(' '+val);
+ $(this).toggle(!!show);
+ });
+ }).trigger('keyup');
+ }
+
+
+
+
+ // make code pretty
+// $('pre').addClass('prettyprint');
+// window.prettyPrint && prettyPrint();
+
+ // Disable links with href="#" inside <section>, so users can click on them
+ // to preview :active state without being scrolled up to the top of the page.
+// $('section a[href="#"]').click(function(e) {
+// e.preventDefault();
+// e.stopPropagation();
+// });
+
+// // inject twitter & github counts
+// $.ajax({
+// url: 'http://api.twitter.com/1/users/show.json',
+// data: {screen_name: 'fortaweso_me'},
+// dataType: 'jsonp',
+// success: function(data) {
+// $('#followers').html(data.followers_count);
+// }
+// });
+// $.ajax({
+// url: 'https://api.github.com/repos/fortawesome/Font-Awesome',
+// dataType: 'jsonp',
+// success: function(data) {
+// $('#watchers').html(data.data.watchers);
+// $('#forks').html(data.data.forks);
+// }
+// });
});