larger-icons.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435
  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>