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

   1 <section id="larger-icons">
   2   <h2 class="page-header">Larger Icons</h2>
   3   <div class="row">
   4     <div class="span3">
   5       <p>
   6         To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>,
   7         <code>icon-3x</code>, or <code>icon-4x</code>.
   8       </p>
   9     </div>
  10     <div class="span9">
  11       <p>
  12         Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>,
  13         <code>icon-3x</code>, or <code>icon-4x</code> classes.
  14       </p>
  15       <div class="well well-transparent">
  16         <div style="font-size: 24px; line-height: 1.5em;">
  17           <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
  18           <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
  19           <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
  20           <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
  21         </div>
  22       </div>
  23 {% highlight html %}
  24 <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
  25 <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
  26 <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
  27 <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
  28 {% endhighlight %}
  29       <div class="alert alert-info">
  30         <i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have
  31         sufficient line-height.
  32       </div>
  33     </div>
  34   </div>
  35 </section>