The iconic font designed for
use with Twitter Bootstrap
You asked, Font Awesome delivers with 40 shiny new icons in version 3.0. This giant set of new icons was requested on the Font Awesome GitHub project.
It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.
Use this method if integrating with Twitter Bootstrap using LESS
@import "sprites.less"; with @import "font-awesome.less";
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
Use this method if integrating with Twitter Bootstrap using CSS.
<head> of your html, reference the location to your font-awesome.css.
<link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/font-awesome.css">
Font Awesome works just as well without Twitter Bootstrap.
Many examples re-used from the Twitter Bootstrap documentation.
Use Font Awesome icons in:
Place Font Awesome icons just about anywhere with the <i> tag.
<i class="icon-camera-retro"></i> icon-camera-retro
To increase the size of icons relative to its container, use icon-large, icon-2x,
icon-3x, or icon-4x.
Increase the icon size by using the icon-large (33% increase), icon-2x,
icon-3x, or icon-4x classes.
icon-camera-retro
icon-camera-retro
icon-camera-retro
icon-camera-retro
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Use the icon-spin class to get any icon to rotate. Works best with icon-spinner and
icon-refresh.
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
Use icon-border and pull-right or pull-left for easy pull quotes or
article graphics.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together ... lots of new possibilities.
<i class="icon-flag icon-4x pull-left icon-border"></i> Use a few of the new styles together ... lots of new possibilities.
Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
pull-right and pull-left, and icon-spin.
<a class="btn" href="#"> <i class="icon-repeat"></i> Reload</a> <a class="btn btn-success" href="#"> <i class="icon-shopping-cart icon-large"></i> Checkout</a> <a class="btn btn-large btn-primary" href="#"> <i class="icon-comment"></i> Comment</a> <a class="btn btn-small btn-info" href="#"> <i class="icon-info-sign"></i> Info</a> <a class="btn btn-danger" href="#"> <i class="icon-trash icon-large"></i> Delete</a> <a class="btn btn-small" href="#"> <i class="icon-cog"></i> Settings</a> <a class="btn btn-large btn-danger" href="#"> <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a> <a class="btn btn-primary" href="#"> <i class="icon-refresh icon-spin"></i> Synchronizing Content...</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 open">
<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>
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>
Anything you can do with CSS font styles, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks)
Here's the plan for future updates.
Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome.I'm the lead product designer at Kyruus. I wake up every single day excited about my job. Why? Kyruus is going to change healthcare. No exaggeration.
Kyruus is a well-funded, big data healthcare startup in Boston. We believe that the right data at the right time can help doctors make better decisions. We believe data can save lives.
What I love about Kyruus:Kyruus needs good people. Designers, app developers, big data masters, & interns that get real responsibility. Come work with me.
Interested? Email me.Hopefully you think Font Awesome is awesome. I've put hundreds of hours into the project to give back to the open source community. If you'd like, here are some ways you can tell me thanks for all my hard work.
Contribute icons to make Font Awesome even awesome-er.
Contribute to a shiny new iMac for me to keep making great icons.
Or pick something straight from my wish list. Gift cards are great.