stacked.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <section id="stacked">
  2. <h2 class="page-header">Stacked Icons</h2>
  3. <div class="row">
  4. <div class="span3">
  5. A method for easily stacking multiple icons. Use the <code>icon-stack</code> class on the parent and
  6. <code>icon-stack-base</code> for the bottom icon.
  7. </div>
  8. <div class="span9">
  9. <div class="well well-large well-transparent lead">
  10. <span class="icon-stack">
  11. <i class="icon-check-empty icon-stack-base"></i>
  12. <i class="icon-twitter"></i>
  13. </span>
  14. icon-twitter on icon-check-empty<br>
  15. <span class="icon-stack">
  16. <i class="icon-circle icon-stack-base"></i>
  17. <i class="icon-flag icon-light"></i>
  18. </span>
  19. icon-flag on icon-circle<br>
  20. <span class="icon-stack">
  21. <i class="icon-sign-blank icon-stack-base"></i>
  22. <i class="icon-terminal icon-light"></i>
  23. </span>
  24. icon-terminal on icon-sign-blank
  25. </div>
  26. {% highlight html %}
  27. <span class="icon-stack">
  28. <i class="icon-check-empty icon-stack-base"></i>
  29. <i class="icon-twitter"></i>
  30. </span>
  31. icon-twitter on icon-check-empty<br>
  32. <span class="icon-stack">
  33. <i class="icon-circle icon-stack-base"></i>
  34. <i class="icon-flag icon-light"></i>
  35. </span>
  36. icon-flag on icon-circle<br>
  37. <span class="icon-stack">
  38. <i class="icon-sign-blank icon-stack-base"></i>
  39. <i class="icon-terminal icon-light"></i>
  40. </span>
  41. icon-terminal on icon-sign-blank
  42. {% endhighlight %}
  43. </div>
  44. </div>
  45. </section>