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="col-md-3 col-sm-4">
   5       <div class="margin-bottom">
   6         <span class="fa-stack fa-lg">
   7           <i class="fa fa-square-o fa-stack-2x"></i>
   8           <i class="fa fa-twitter fa-stack-1x"></i>
   9         </span>
  10         fa-twitter on fa-square-o<br>
  11         <span class="fa-stack fa-lg">
  12           <i class="fa fa-circle fa-stack-2x"></i>
  13           <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  14         </span>
  15         fa-flag on fa-circle<br>
  16         <span class="fa-stack fa-lg">
  17           <i class="fa fa-square fa-stack-2x"></i>
  18           <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
  19         </span>
  20         fa-terminal on fa-square<br>
  21         <span class="fa-stack fa-lg">
  22           <i class="fa fa-camera fa-stack-1x"></i>
  23           <i class="fa fa-ban fa-stack-2x text-danger"></i>
  24         </span>
  25         fa-ban on fa-camera
  26       </div>
  27     </div>
  28     <div class="col-md-9 col-sm-8">
  29       <p>
  30         To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
  31         for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
  32         can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
  33         to get further control of sizing.
  34       </p>
  35 {% highlight html %}
  36 <span class="fa-stack fa-lg">
  37   <i class="fa fa-square-o fa-stack-2x"></i>
  38   <i class="fa fa-twitter fa-stack-1x"></i>
  39 </span>
  40 fa-twitter on fa-square-o<br>
  41 <span class="fa-stack fa-lg">
  42   <i class="fa fa-circle fa-stack-2x"></i>
  43   <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
  44 </span>
  45 fa-flag on fa-circle<br>
  46 <span class="fa-stack fa-lg">
  47   <i class="fa fa-square fa-stack-2x"></i>
  48   <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
  49 </span>
  50 fa-terminal on fa-square<br>
  51 <span class="fa-stack fa-lg">
  52   <i class="fa fa-camera fa-stack-1x"></i>
  53   <i class="fa fa-ban fa-stack-2x text-danger"></i>
  54 </span>
  55 fa-ban on fa-camera
  56 {% endhighlight %}
  57     </div>
  58   </div>
  59 </section>