new file mode 100644

@@ -0,0 +1,79 @@

+---

+layout: base

+title_suffix: Font Awesome Icons

+relative_path: ../../

+---

+<div class="jumbotron jumbotron-icon">

+  <div class="container">

+    <div class="info-icons">

+      <i class="fa fa-{{ page.icon.id }} fa-6" aria-hidden="true"></i>

+      <span class="sr-only">Example of {{ page.icon.id }} at 6x</span>&nbsp;&nbsp;

+      <span class="hide-xs">

+        <i class="fa fa-{{ page.icon.id }} fa-5" aria-hidden="true"></i>

+        <span class="sr-only">Example of {{ page.icon.id }} at 5x</span>

+          

+        <span class="hide-sm">

+          <i class="fa fa-{{ page.icon.id }} fa-4" aria-hidden="true"></i>

+          <span class="sr-only">Example of {{ page.icon.id }} at 4x</span>

+            

+        </span>

+        <i class="fa fa-{{ page.icon.id }} fa-3" aria-hidden="true"></i>

+        <span class="sr-only">Example of {{ page.icon.id }} at 3x</span>

+          

+        <i class="fa fa-{{ page.icon.id }} fa-2" aria-hidden="true"></i>

+        <span class="sr-only">Example of {{ page.icon.id }} at 2x</span>

+         

+      </span>

+      <i class="fa fa-{{ page.icon.id }} fa-1" aria-hidden="true"></i>

+      <span class="sr-only">Example of {{ page.icon.id }}</span>

+    </div>

+    <h1 class="info-class">

+      fa-{{ page.icon.id }}

+      <small>

+        <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> &middot;

+        Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot;

+        Created: v{{ page.icon.created }} ·

+        Categories:

+        {% for category in page.icon.categories %}

+          {{ category }}{% unless forloop.last %},{% endunless %}

+        {% endfor %}

+        {% assign icon_alias_count = page.icon.aliases | size %}

+        {% if icon_alias_count > 0 %}

+          · Aliases:

+          {% for alias in page.icon.aliases %}

+            fa-{{ alias }}{% unless forloop.last %},{% endunless %}

+          {% endfor %}

+        {% endif %}

+        {% if page.icon.url %}&middot; <a target="_blank" rel="nofollow" href="http://{{ page.icon.url }}">{{ page.icon.url }}<i class="fa fa-external-link-square margin-left-sm"></i></a>{% endif %}

+      </small>

+    </h1>

+  </div>

+</div>

+

+<div class="container">

+  <section>

+    <div class="row">

+      <div class="col-md-9 col-sm-9">

+        <p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>

+        <div class="well well-transparent">

+          <div style="font-size: 24px; line-height: 1.5em;">

+            <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i><span class="sr-only">Example of {{ page.icon.id }}</span> fa-{{ page.icon.id }}

+          </div>

+        </div>

+{% highlight html %}

+<i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i>

+{% endhighlight %}

+        <p class="margin-bottom-lg">

+          <small class="text-muted">Note: to improve <a href="{{ page.relative_path }}accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>

+        </p>

+

+        <div class="lead">

+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.

+        </div>

+      </div>

+      <div class="col-md-3 col-sm-3">

+        <div class="vertical-ad">{% include ads/carbon.html %}</div>

+      </div>

+    </div>

+  </section>

+</div>