new file mode 100644

@@ -0,0 +1,97 @@

+---

+layout: base

+title: Font Awesome Icons

+navbar_active: icons

+relative_path: ../

+---

+{% capture jumbotron_h1 %}<i class="fa fa-flag" aria-hidden="true"></i>&nbsp; The Icons{% endcapture %}

+{% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}

+

+{% include jumbotron.html %}

+

+<div class="container" data-view="search">

+  {% capture stripe_ad_content %}

+  <p class="lead">

+    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>.

+    <!--The ever-expanding list of Font Awesome {{ site.fontawesome.version }} icons.-->

+    Need vectors or want to use on the desktop? Check the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.

+  </p>

+  {% endcapture %}

+  {% include stripe-ad.html %}

+

+  <div class="row">

+    <div class="col-sm-10">

+      <section id="search">

+        <label for="search-input"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search icons</span></label>

+        <input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">

+        <a id="search-clear" href="#" class="fa fa-times-circle hide" aria-hidden="true"><span class="sr-only">Clear search</span></a>

+      </section>

+    </div>

+    <div class="col-sm-2 padding-left-none hidden-xs">

+      <div class="algolia text-center">

+        <a href="https://algolia.com"><i class="fas fas-algolia-new fas-4x" aria-hidden="true"></i><div>by Algolia</div></a>

+      </div>

+    </div>

+  </div>

+

+  <div id="search-results" class="hide"></div>

+  <div id="icons">

+    {% include icons/new.html %}

+    {% include icons/web-application.html %}

+    {% include icons/accessibility.html %}

+    {% include icons/hand.html %}

+    {% include icons/transportation.html %}

+    {% include icons/gender.html %}

+    {% include icons/file-type.html %}

+    {% include icons/spinner.html %}

+    {% include icons/form-control.html %}

+    {% include icons/payment.html %}

+    {% include icons/chart.html %}

+    {% include icons/currency.html %}

+    {% include icons/text-editor.html %}

+    {% include icons/directional.html %}

+    {% include icons/video-player.html %}

+    {% include icons/brand.html %}

+    {% include icons/medical.html %}

+  </div>

+  <script type="text/template" id="results-template">

+    <h2 class="page-header">Search for '<span class="text-color-default"><%- content.query %></span>'</h2>

+    <% if (content.nbHits > 0) { %>

+      <div class="row fontawesome-icon-list">

+        <%= results %>

+      </div>

+    <% } else { %>

+      <div class="alert alert-danger text-lg" role="alert">

+        <h3 class="margin-top margin-bottom-lg"><i class="fa fa-meh-o" aria-hidden="true"></i> Oops! No icons matched your query.</h3>

+        A few things that might help:

+        <ol>

+          <li>

+            Use <a class="alert-link" href="https://fortawesome.com">Fort Awesome</a> (our latest project) to add your

+            own icons and take your icon game to the next level!

+          </li>

+          <li>

+            Really, really want to see an icon in Font Awesome?

+            <a class="alert-link" href="mailto:dave@fortawesome.com">Drop me an email</a> to commission the icons you need!

+          </li>

+          <li>

+            Are we missing something in our search results?

+            <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues/new">Open an issue on GitHub!</a>

+            (Make sure to <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues">search existing

+            issues first</a>.)

+          </li>

+        </ol>

+      </div>

+    <% } %>

+  </script>

+  <script type="text/template" id="result-template">

+    <div class="fa-hover col-md-3 col-sm-4">

+      <a href="{{ page.relative_path }}icon/<%= result.name %>">

+        <i class="fa <%= result.css_class %>" aria-hidden="true"></i> <%= result._highlightResult.name.value %>

+        <% if (matches.length > 0) { %>

+          <span class="text-muted">(<%= matches.join(", ") %>)</span>

+        <% } %>

+      </a>

+    </div>

+  </script>

+</div>