--- 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> <i class="icon-{{ page.icon['id'] }} icon-5"></i> <i class="icon-{{ page.icon['id'] }} icon-4"></i> <i class="icon-{{ page.icon['id'] }} icon-3"></i> <i class="icon-{{ page.icon['id'] }} icon-2"></i> <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 %} {% if page.icon['aliases'] %} · 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 linenos %} <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>