Icons & Button
New Icons in 3.2.0
Web Application Icons
Currency Icons
Text Editor Icons
Directional Icons
Video Player Icons
Brand Icons
- 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.
Medical Icons
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>