diff options
Diffstat (limited to 'library/font_awesome/src/icons.html')
| -rw-r--r-- | library/font_awesome/src/icons.html | 89 |
1 files changed, 86 insertions, 3 deletions
diff --git a/library/font_awesome/src/icons.html b/library/font_awesome/src/icons.html index 6dc589d8c..00ad17e74 100644 --- a/library/font_awesome/src/icons.html +++ b/library/font_awesome/src/icons.html @@ -4,12 +4,95 @@ title: Font Awesome Icons navbar_active: icons relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="icon-flag icon-large"></i> The Icons{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-flag" aria-hidden="true"></i> The Icons{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% include jumbotron.html %} {% include stripe-social.html %} -<div class="container"> - {% include icons.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-md-10 col-sm-9"> + <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-md-2 col-sm-3 padding-left-none hidden-xs"> + <div class="algolia"> + by <a href="https://algolia.com"><i class="fas fas-algolia" aria-hidden="true"></i><span class="sr-only">Algolia</span></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> |