git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/_layouts/icon.html

   1 ---
   2 layout: base
   3 title_suffix: Font Awesome Icons
   4 relative_path: ../../
   5 ---
   6 <div class="jumbotron jumbotron-icon">
   7   <div class="container">
   8     <div class="info-icons">
   9       <i class="fa fa-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp;
  10       <span class="hide-xs">
  11         <i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
  12         <span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
  13         <i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
  14         <i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
  15       </span>
  16       <i class="fa fa-{{ page.icon.id }} fa-1"></i>
  17     </div>
  18     <h1 class="info-class">
  19       fa-{{ page.icon.id }}
  20       <small>
  21         <i class="fa fa-{{ page.icon.id }}"></i> &middot;
  22         Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot;
  23         Created: v{{ page.icon.created }} &middot;
  24         Categories:
  25         {% for category in page.icon.categories %}
  26           {{ category }}{% unless forloop.last %},{% endunless %}
  27         {% endfor %}
  28         {% assign icon_alias_count = page.icon.aliases | size %}
  29         {% if icon_alias_count > 0 %}
  30           &middot; Aliases:
  31           {% for alias in page.icon.aliases %}
  32             fa-{{ alias }}{% unless forloop.last %},{% endunless %}
  33           {% endfor %}
  34         {% endif %}
  35       </small>
  36     </h1>
  37   </div>
  38 </div>
  39
  40
  41 <div class="container">
  42   <section>
  43     <div class="row">
  44       <div class="col-md-9 col-sm-9">
  45         <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>
  46         <div class="well well-transparent">
  47           <div style="font-size: 24px; line-height: 1.5em;">
  48             <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
  49           </div>
  50         </div>
  51 {% highlight html %}
  52 <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
  53 {% endhighlight %}
  54         <br>
  55         <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
  56       </div>
  57       <div class="col-md-3 col-sm-3">
  58         <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
  59       </div>
  60     </div>
  61   </section>
  62 </div>