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

   1 <section id="buttons">
   2   <h2 class="page-header">Buttons</h2>
   3   <div class="row">
   4     <div class="span3">
   5       <p>
   6         <a class="btn" href="#">
   7           <i class="icon-repeat"></i> Reload</a>
   8         <a class="btn btn-success" href="#">
   9           <i class="icon-shopping-cart icon-large"></i> Checkout</a>
  10       </p>
  11       <p>
  12         <a class="btn btn-large btn-primary" href="#">
  13           <i class="icon-comment"></i> Comment</a>
  14         <a class="btn btn-small btn-info" href="#">
  15           <i class="icon-info-sign"></i> Info</a>
  16       </p>
  17       <p>
  18         <a class="btn btn-danger" href="#">
  19           <i class="icon-trash icon-large"></i> Delete</a>
  20         <a class="btn btn-small" href="#">
  21           <i class="icon-cog"></i> Settings</a>
  22       </p>
  23       <p>
  24         <a class="btn btn-large btn-danger" href="#">
  25           <i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
  26       </p>
  27       <p>
  28         <a class="btn btn-primary" href="#">
  29           <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
  30       </p>
  31     </div>
  32     <div class="span9">
  33       <p>
  34         Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
  35         <code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>.
  36       </p>
  37 {% highlight html %}
  38 <a class="btn" href="#">
  39   <i class="icon-repeat"></i> Reload</a>
  40 <a class="btn btn-success" href="#">
  41   <i class="icon-shopping-cart icon-large"></i> Checkout</a>
  42 <a class="btn btn-large btn-primary" href="#">
  43   <i class="icon-comment"></i> Comment</a>
  44 <a class="btn btn-small btn-info" href="#">
  45   <i class="icon-info-sign"></i> Info</a>
  46 <a class="btn btn-danger" href="#">
  47   <i class="icon-trash icon-large"></i> Delete</a>
  48 <a class="btn btn-small" href="#">
  49   <i class="icon-cog"></i> Settings</a>
  50 <a class="btn btn-large btn-danger" href="#">
  51   <i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
  52 <a class="btn btn-primary" href="#">
  53   <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
  54 {% endhighlight %}
  55     </div>
  56   </div>
  57 </section>