The iconic font designed for
use with Twitter Bootstrap
You asked, Font Awesome delivers with 37 shiny new icons in version 3.0. This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3.
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.
<div style="font-size: 24px; line-height: 1.5em;"> <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.
<div style="font-size: 24px; line-height: 1.5em;"> <i class="icon-camera-retro icon-large"></i> icon-camera-retro </div>
Font Awesome icons work great in buttons.
<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>
<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>
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 effects, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks)
Here's the plan for future updates.
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.