---
layout: base
title: Fork Awesome Examples
navbar_active: examples
relative_path: ../
---
{% capture jumbotron_h1 %}<i class="fa fa-magic" aria-hidden="true"></i>&nbsp; Examples{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use {{ site.forkawesome.name }}{% endcapture %}

{% include jumbotron.html %}
{% include stripe-social.html %}

<div class="container">
  <p class="lead">
    After you <a href="{{ page.relative_path }}get-started/">get up and running</a>, you can place {{ site.forkawesome.name }} icons just about
    anywhere with the <code>&lt;i&gt;</code> tag.
    Some examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.
  </p>

  <div class="alert alert-success gg">
    <div class="gg-col min-width">
      <i class="fa fa-universal-access fa-2x" aria-hidden"true"></i>
    </div>
    <div class="gg-col padding-left">
      <p class="margin-bottom-none">The following examples are kept simple. So please be sure to visit the <a href="{{ page.relative_path }}examples/#accessible">manual accessibility examples</a> and read more about <a href="{{ page.relative_path }}accessibility">making your icons accessible for all users</a>.</p>
    </div>
  </div>

  {% include examples/basic.html %}
  {% include examples/larger.html %}
  {% include examples/fixed-width.html %}
  {% include examples/list.html %}
  {% include examples/bordered-pulled.html %}
  {% include examples/animated.html %}
  {% include examples/rotated-flipped.html %}
  {% include examples/stacked.html %}
  {% include examples/bootstrap.html %}
  {% include examples/custom.html %}
  {% include examples/accessible.html %}
</div>