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

   1 <section id="fixed-width">
   2   <h2 class="page-header">Fixed Width Icons</h2>
   3   <div class="row">
   4     <div class="col-md-3 col-sm-4">
   5       <ul class="nav nav-pills nav-stacked margin-bottom">
   6         <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a></li>
   7         <li><a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a></li>
   8         <li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a></li>
   9         <li><a href="#"><i class="fa fa-cogs fa-fw"></i>&nbsp; Settings</a></li>
  10       </ul>
  11     </div>
  12     <div class="col-md-9 col-sm-8">
  13       <p>
  14         Use <code>fa-fw</code> to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
  15         Especially useful in things like nav lists.
  16       </p>
  17 {% highlight html %}
  18 <ul class="nav nav-pills nav-stacked">
  19   <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
  20   <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
  21   <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
  22   <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
  23 </ul>
  24 {% endhighlight %}
  25     </div>
  26   </div>
  27 </section>