Icons & Buttons

16
Archie
Icons & Button
  • All brand icons are trademarks of their respective owners.
  • The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
Button
Button class=""
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse
btn btn-link
btn btn-metis-1
btn btn-metis-2
btn btn-metis-3
btn btn-metis-4
btn btn-metis-5
Button Size

<p>
  <button class="btn btn-large btn-metis-1" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-metis-2" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-metis-3" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-metis-4" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>
                                                                
<a href="#" class="btn btn-large btn-metis-5 disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
                                                                
Button Group
Single button group
<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>
                                                                    
Multiple button groups
<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>
                                                                    
Vertical button groups
<div class="btn-group btn-group-vertical">
  ...
</div>
                                                                    
Button dropdown menus
Overview and examples
<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>
                                                                    
Split button dropdowns
<div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>
                                                                    
Dropup menus
<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>