git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/_includes/examples/stacked.html

   1 <section id="stacked">
   2   <h2 class="page-header">Stacked Icons</h2>
   3   <div class="row">
   4     <div class="span3">
   5       A method for easily stacking multiple icons. Use the <code>icon-stack</code> class on the parent and
   6       <code>icon-stack-base</code> for the bottom icon.
   7     </div>
   8     <div class="span9">
   9       <div class="well well-large well-transparent lead">
  10         <span class="icon-stack">
  11           <i class="icon-check-empty icon-stack-base"></i>
  12           <i class="icon-twitter"></i>
  13         </span>
  14         icon-twitter on icon-check-empty<br>
  15         <span class="icon-stack">
  16           <i class="icon-circle icon-stack-base"></i>
  17           <i class="icon-flag icon-light"></i>
  18         </span>
  19         icon-flag on icon-circle<br>
  20         <span class="icon-stack">
  21           <i class="icon-sign-blank icon-stack-base"></i>
  22           <i class="icon-terminal icon-light"></i>
  23         </span>
  24         icon-terminal on icon-sign-blank<br>
  25         <span class="icon-stack">
  26           <i class="icon-camera"></i>
  27           <i class="icon-ban-circle icon-stack-base text-error"></i>
  28         </span>
  29         icon-camera on icon-ban-circle
  30       </div>
  31 {% highlight html %}
  32 <span class="icon-stack">
  33   <i class="icon-check-empty icon-stack-base"></i>
  34   <i class="icon-twitter"></i>
  35 </span>
  36 icon-twitter on icon-check-empty<br>
  37 <span class="icon-stack">
  38   <i class="icon-circle icon-stack-base"></i>
  39   <i class="icon-flag icon-light"></i>
  40 </span>
  41 icon-flag on icon-circle<br>
  42 <span class="icon-stack">
  43   <i class="icon-sign-blank icon-stack-base"></i>
  44   <i class="icon-terminal icon-light"></i>
  45 </span>
  46 icon-terminal on icon-sign-blank<br>
  47 <span class="icon-stack">
  48   <i class="icon-camera"></i>
  49   <i class="icon-ban-circle icon-stack-base text-error"></i>
  50 </span>
  51 icon-camera on icon-ban-circle
  52 {% endhighlight %}
  53     </div>
  54   </div>
  55 </section>