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

   1 <section id="larger">
   2   <h2 class="page-header">Larger Icons</h2>
   3   <div class="row">
   4     <div class="col-md-3 col-sm-4">
   5       <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
   6       <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
   7       <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
   8       <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
   9       <p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
  10     </div>
  11     <div class="col-md-9 col-sm-8">
  12       <p>
  13         To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
  14         <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
  15       </p>
  16 {% highlight html %}
  17 <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
  18 <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
  19 <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
  20 <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
  21 <p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
  22 {% endhighlight %}
  23       <div class="alert alert-success">
  24         <i class="fa fa-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have
  25         sufficient line-height.
  26       </div>
  27     </div>
  28   </div>
  29 </section>