--- layout: base title: Font Awesome Examples navbar_active: examples relative_path: ../ --- {% capture jumbotron_h1 %}<i class="fa fa-magic" aria-hidden="true"></i> Examples{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% include jumbotron.html %} {% include stripe-social.html %} <div class="container"> {% capture stripe_ad_content %} <p class="lead"> After you <a href="{{ page.relative_path }}get-started/">get up and running</a>, you can place Font Awesome icons just about anywhere with the <code><i></code> tag. Some examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>. </p> {% endcapture %} {% include stripe-ad.html %} <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 and assume use of <a href="{{ page.relative_path }}get-started/get-started-cdn">Font Awesome CDN</a>, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see 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 more awesome 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>