---
layout: base
title_prefix: Font Awesome Icons
---
<div class="jumbotron jumbotron-icon">
  <div class="container">
    <div class="info-icons">
      <i class="icon-{{ page.icon['id'] }} icon-6"></i>&nbsp;&nbsp;
      <i class="icon-{{ page.icon['id'] }} icon-5"></i>&nbsp;&nbsp;
      <i class="icon-{{ page.icon['id'] }} icon-4"></i>&nbsp;&nbsp;
      <i class="icon-{{ page.icon['id'] }} icon-3"></i>&nbsp;&nbsp;
      <i class="icon-{{ page.icon['id'] }} icon-2"></i>&nbsp;
      <i class="icon-{{ page.icon['id'] }} icon-1"></i>
    </div>
    <h1 class="info-class">
      icon-{{ page.icon['id'] }}
      <small>
        <i class="icon-{{ page.icon['id'] }}"></i> &middot;
        Unicode: <span class="upper">{{ page.icon['unicode'] }}</span> &middot;
        Created: v{{ page.icon['created'] }} &middot;
        Categories:
        {% for category in page.icon['categories'] %}
          {{ category }}{% unless forloop.last %},{% endunless %}
        {% endfor %}
        {% if page.icon['aliases'] %}
          &middot; Aliases:
          {% for alias in page.icon['aliases'] %}
            icon-{{ alias }}{% unless forloop.last %},{% endunless %}
          {% endfor %}
        {% endif %}
      </small>
    </h1>
  </div>
</div>


<div class="container">
  <section>
    <div class="row-fluid">
      <div class="span9">
        <p>After you get <a href="{{ site.baseurl }}integration/">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="icon-{{ page.icon['id'] }}"></i> icon-{{ page.icon['id'] }}
          </div>
        </div>
{% highlight html %}
<i class="icon-{{ page.icon['id'] }}"></i> icon-{{ page.icon['id'] }}
{% endhighlight %}
        <br>
        <div class="lead"><i class="icon-info-sign"></i> Looking for more? Check out the <a href="{{ site.baseurl }}examples/">examples</a>.</div>
      </div>
      <div class="span3">
        <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
      </div>
    </div>
  </section>
</div>