2013-05-02 20:12:33 -04:00
---
layout: base
title: Font Awesome Examples
navbar_active: examples
2013-05-08 23:15:29 -04:00
relative_path: ../
2013-05-02 20:12:33 -04:00
---
2016-04-01 09:45:15 -04:00
{% capture jumbotron_h1 %}< i class = "fa fa-magic" aria-hidden = "true" > < / i > Examples{% endcapture %}
2013-05-02 23:16:41 -04:00
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
2013-05-02 20:12:33 -04:00
{% include jumbotron.html %}
{% include stripe-social.html %}
< div class = "container" >
2013-10-19 15:20:03 -04:00
{% 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.
2013-10-22 22:03:40 -04:00
Some examples appreciatively re-used from the < a href = "{{ site.bootstrap.url }}" > Bootstrap documentation< / a > .
2013-10-19 15:20:03 -04:00
< / p >
{% endcapture %}
{% include stripe-ad.html %}
2016-05-13 09:44:41 -04:00
< 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 >
2014-05-14 00:09:29 -05:00
{% include examples/basic.html %}
2013-10-22 19:05:37 -04:00
{% include examples/larger.html %}
2013-10-22 11:11:34 -04:00
{% include examples/fixed-width.html %}
2013-10-22 15:55:08 -04:00
{% include examples/list.html %}
2013-10-19 15:20:03 -04:00
{% include examples/bordered-pulled.html %}
2015-01-22 10:48:08 -05:00
{% include examples/animated.html %}
2013-10-19 15:20:03 -04:00
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
2013-10-20 20:03:57 -04:00
{% include examples/bootstrap.html %}
2013-10-19 15:20:03 -04:00
{% include examples/custom.html %}
2016-05-13 09:44:41 -04:00
{% include examples/accessible.html %}
2013-05-02 20:12:33 -04:00
< / div >