Fork-Awesome/src/_includes/icons/filter.html
2014-12-10 16:12:18 +01:00

37 lines
2 KiB
HTML

<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>
<script>
try {
window.filterSet = JSON.parse('{{ icons | flattenIconFilters | jsonify }}');
} catch (e) {
console.error('Invalid JSON data!');
window.filterSet = [];
}
</script>
<{% 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>
<div id="no-search-results">
<div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> No icons with the tag <strong>'<span></span>'</strong> were found.</div>
<div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle"></i> Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>!</div>
</div>
</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>