<div class="filter-parent" id="search">
  <label for="filter-by"><i class="fa fa-search"></i></label>
  <input placeholder="Search icons" id="filter-by" class="form-control input-lg" tabindex="1">
  <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>
<section id="filter">
  <h2 class="page-header text-muted">Search for '<span class="text-color-default" id="filter-val"></span>'</h2>

  <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> {{ 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-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No icons matching <strong>'<span></span>'</strong> were found.</div>
    <div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle margin-right-sm"></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>

</section>
