fa-camera-retro
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
fa
<i>
<span>
<i class="fa fa-camera-retro"></i> fa-camera-retro
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
fa-fw
<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a> </div>
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
fa-ul
fa-li
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul>
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Use fa-border and pull-right or pull-left for easy pull quotes or article icons.
fa-border
pull-right
pull-left
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i> ...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.
fa-spin
fa-spinner
fa-refresh
fa-cog
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i>
CSS3 animations aren't supported in IE8 - IE9.
normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
fa-rotate-*
fa-flip-*
<i class="fa fa-shield"></i> normal<br> <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> <i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.
fa-stack
fa-stack-1x
fa-stack-2x
fa-inverse
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-square-o<br> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> fa-flag on fa-circle<br> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span> fa-terminal on fa-square<br> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i> </span> fa-ban on fa-camera
Delete Settings
Font Awesome Version 4.2.0
Font Awesome works great with the full range of Bootstrap components.
<button type="button" class="btn btn-danger"> <i class="fa fa-trash-o fa-lg"></i> Delete</button> <button type="button" class="btn btn-default btn-sm"> <i class="fa fa-cog"></i> Settings</button> <button type="button" class="btn btn-lg btn-success"> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.2.0</button> <div class="btn-group"> <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-align-justify"></i></button> </div> <div class="input-group mb-10"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input class="form-control" type="text" placeholder="Email address"> </div> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input class="form-control" type="password" placeholder="Password"> </div> <div class="btn-group open"> <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
Anything you can do with CSS font styles, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks)