--- layout: base title_suffix: Font Awesome Icons relative_path: ../../ --- <div class="jumbotron jumbotron-icon"> <div class="container"> <div class="info-icons"> <i class="icon-{{ page.icon.id }} icon-6"></i> <span class="hidden-phone"> <i class="icon-{{ page.icon.id }} icon-5"></i> <span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i> </span> <i class="icon-{{ page.icon.id }} icon-3"></i> <i class="icon-{{ page.icon.id }} icon-2"></i> </span> <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> · Unicode: <span class="upper">{{ page.icon.unicode }}</span> · 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 %} 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="{{ page.relative_path }}integration/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code><i></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="{{ page.relative_path }}examples/">examples</a>.</div> </div> <div class="span3"> <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div> </div> </div> </section> </div>