Place Font Awesome icons just about anywhere with the <i>
tag.
<div style="font-size: 24px;"> <i class="icon-camera-retro"> </i> icon-camera-retro</div>
Increase the icon size by using the icon-large
class. This
increases the size by 33% relative to the font-size of the container.
Use Font Awesome icons in navigation to provide helpful visual cues.
<ul class="nav nav-list"> <li class="active"><a href="#"> <i class="icon-home"></i> Home</a></li> <li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="icon-cogs"></i> Settings</a></li> </ul>
<form> <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i> </span> <input class="span2" type="text" placeholder="Email address"> </div> <div class="input-prepend"> <span class="add-on"><i class="icon-key"></i></span> <input class="span2" type="password" placeholder="Password"> </div> </form>
<a class="btn" href="#"> <i class="icon-refresh"></i> Refresh</a> <a class="btn btn-success" href="#"> <i class="icon-shopping-cart icon-large"></i> Checkout</a> <a class="btn btn-large btn-warning href="#"> <i class="icon-trash icon-medium"></i> Delete</a> <a class="btn btn-small btn-inverse" href="#"> <i class="icon-cog"></i> Settings</a> <a class="btn btn-small btn-info" href="#"> <i class="icon-info-sign"></i> More Info</a>
<div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div>
<div class="btn-group"> <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-caret-down"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
Easily replace individual bullets.
<ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>