icons.html 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. ---
  2. layout: base
  3. title: Font Awesome Icons
  4. navbar_active: icons
  5. relative_path: ../
  6. ---
  7. {% capture jumbotron_h1 %}<i class="fa fa-flag"></i>&nbsp; The Icons{% endcapture %}
  8. {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}
  9. {% include jumbotron.html %}
  10. {% include stripe-social.html %}
  11. <div class="container" data-view="search">
  12. {% capture stripe_ad_content %}
  13. <p class="lead">
  14. You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
  15. Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
  16. <!--The ever-expanding list of Font Awesome {{ site.fontawesome.version }} icons.-->
  17. Need vectors or want to use on the desktop? Check the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
  18. </p>
  19. {% endcapture %}
  20. {% include stripe-ad.html %}
  21. <div class="row">
  22. <div class="col-md-10 col-sm-9">
  23. <section id="search">
  24. <label for="search-input"><i class="fa fa-search"></i></label>
  25. <input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
  26. <a id="search-clear" href="#" class="fa fa-times-circle hide"></a>
  27. </section>
  28. </div>
  29. <div class="col-md-2 col-sm-3 padding-left-none hidden-xs">
  30. <div class="algolia">
  31. by <a href="https://algolia.com"><i class="fas fas-algolia"></i></a>
  32. </div>
  33. </div>
  34. </div>
  35. <div id="search-results" class="hide"></div>
  36. <div id="icons">
  37. {% include icons/new.html %}
  38. {% include icons/web-application.html %}
  39. {% include icons/hand.html %}
  40. {% include icons/transportation.html %}
  41. {% include icons/gender.html %}
  42. {% include icons/file-type.html %}
  43. {% include icons/spinner.html %}
  44. {% include icons/form-control.html %}
  45. {% include icons/payment.html %}
  46. {% include icons/chart.html %}
  47. {% include icons/currency.html %}
  48. {% include icons/text-editor.html %}
  49. {% include icons/directional.html %}
  50. {% include icons/video-player.html %}
  51. {% include icons/brand.html %}
  52. {% include icons/medical.html %}
  53. </div>
  54. <script type="text/template" id="results-template">
  55. <h2 class="page-header">Search for '<span class="text-color-default"><%= content.query %></span>'</h2>
  56. <% if (content.nbHits > 0) { %>
  57. <div class="row fontawesome-icon-list">
  58. <%= results %>
  59. </div>
  60. <% } else { %>
  61. <div class="alert alert-danger text-lg" role="alert">
  62. <h3 class="margin-top margin-bottom-lg"><i class="fa fa-meh-o"></i> Oops! No icons matched your query.</h3>
  63. A few things that might help:
  64. <ol>
  65. <li>
  66. Use <a class="alert-link" href="https://fonticons.com">Fonticons</a> (our latest project) to add your
  67. own icons and take your icon game to the next level!
  68. </li>
  69. <li>
  70. Really, really want to see an icon in Font Awesome?
  71. <a class="alert-link" href="mailto:dave@fonticons.com">Drop me an email</a> to commission the icons you need!
  72. </li>
  73. <li>
  74. Are we missing something in our search results?
  75. <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues/new">Open an issue on GitHub!</a>
  76. (Make sure to <a class="alert-link" href="https://github.com/FortAwesome/Font-Awesome/issues">search existing
  77. issues first</a>.)
  78. </li>
  79. </ol>
  80. </div>
  81. <% } %>
  82. </script>
  83. <script type="text/template" id="result-template">
  84. <div class="fa-hover col-md-3 col-sm-4">
  85. <a href="{{ page.relative_path }}icon/<%= result.name %>">
  86. <i class="fa <%= result.css_class %>"></i> <%= result._highlightResult.name.value %>
  87. <% if (matches.length > 0) { %>
  88. <span class="text-muted">(<%= matches.join(", ") %>)</span>
  89. <% } %>
  90. </a>
  91. </div>
  92. </script>
  93. </div>