2012-03-09 05:02:49 +00:00
<!DOCTYPE html>
<!-- [if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif] -->
<!-- [if IE 7 ]><html class="ie ie7" lang="en"> <![endif] -->
<!-- [if IE 8 ]><html class="ie ie8" lang="en"> <![endif] -->
<!-- [if (gte IE 9)|!(IE)]><! --> < html lang = "en" > <!-- <![endif] -->
< head >
<!-- Basic Page Needs
================================================== -->
< meta charset = "utf-8" / >
< title > Font Awesome, the iconic font designed for use with Twitter Bootstrap< / title >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- CSS
================================================== -->
< link rel = "stylesheet" href = "assets/css/site.css" >
< link rel = "stylesheet" href = "assets/css/prettify.css" >
2012-05-16 13:06:08 +00:00
<!-- [if IE 7]>
link rel="stylesheet" href="{{ STATIC_URL }}font/font-awesome/font-awesome-ie7.css">
<![endif]-->
2012-03-09 05:02:49 +00:00
2012-05-16 13:06:08 +00:00
<!-- Le fav and touch icons -->
2012-03-09 05:02:49 +00:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
< / head >
< body >
<!-- for navigation -->
< div id = "overview" > < / div >
< div class = "navbar navbar-fixed-top" >
< div class = "navbar-inner" >
< div class = "container" >
< h3 > < a class = "brand" href = "#" > < i class = "icon-flag" > < / i > Font Awesome< / a > < / h3 >
< ul class = "nav" >
< li > < a href = "#overview" > Overview< / a > < / li >
< li > < a href = "#base-icons" > Base Icons< / a > < / li >
< li > < a href = "#extended-icons" > Extended Icons< / a > < / li >
< li > < a href = "#examples" > Examples< / a > < / li >
< li > < a href = "#integration" > Integration< / a > < / li >
< li > < a href = "#code" > Code< / a > < / li >
< li > < a href = "#roadmap" > Roadmap< / a > < / li >
< / ul >
< ul class = "nav pull-right" >
< li > < a href = "mailto:dave@davegandy.com" > < i class = "icon-envelope" > < / i > Me< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "hero-unit" >
< div id = "iconCarousel" class = "carousel" >
<!-- Carousel items -->
< div class = "carousel-inner" >
< div class = "active item" > < div > < i class = "icon-flag" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-star-empty" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-fire" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-envelope" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-leaf" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-key" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-pushpin" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-cogs" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-book" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-film" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-tint" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-edit" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-search" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-home" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-calendar" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-picture" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-headphones" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-heart-empty" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-thumbs-up" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "icon-flag" > < / i > < / div > < / div >
< / div >
<!-- Carousel nav -->
< a class = "carousel-control left" href = "#iconCarousel" data-slide = "prev" > < i class = "icon-arrow-left" > < / i > < / a >
< a class = "carousel-control right" href = "#iconCarousel" data-slide = "next" > < i class = "icon-arrow-right" > < / i > < / a >
< / div >
< div class = "hero-content" >
< h1 > Font Awesome< / h1 >
< p > The iconic font designed for use with Twitter Bootstrap< / p >
< div class = "actions" >
< a class = "btn btn-primary btn-large" href = "https://github.com/FortAwesome/Font-Awesome/zipball/master" > < i class = "icon-download" > < / i > Download< br > Font Awesome< / a >
2012-05-15 21:24:53 +00:00
< a class = "btn btn-large btn-github" href = "https://github.com/FortAwesome/Font-Awesome" > < i class = "icon-github" > < / i > View Project< br > on GitHub< / a >
2012-03-09 05:02:49 +00:00
< / div >
< / div >
< / div >
< section id = "why" >
< div class = "row" >
< div class = "span4" >
2012-05-15 21:24:53 +00:00
< h3 > < i class = "icon-flag icon-large" > < / i > One font, 200+ icons< / h3 >
2012-03-09 05:02:49 +00:00
In a single collection, Font Awesome is a pictographic language of web-related actions.
< / div >
< div class = "span4" >
< h3 > < i class = "icon-gift icon-large" > < / i > Free for commercial use< / h3 >
The Font Awesome webfont and CSS libraries are completely free for commercial use.
< / div >
< div class = "span4" >
< h3 > < i class = "icon-search icon-large" > < / i > Screen reader compatible< / h3 >
Font Awesome won't trip up screen readers, unlike most icon fonts.
< / div >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > < i class = "icon-resize-full icon-large" > < / i > Infinite scalability< / h3 >
Scalable vector graphics means icons look awesome at any size.
< / div >
< div class = "span4" >
< h3 > < i class = "icon-pencil icon-large" > < / i > CSS control< / h3 >
Easily style icon color, size, shadow, and anything that's possible with CSS.
< / div >
< div class = "span4" >
< h3 > < i class = "icon-ok icon-large" > < / i > Broad compatibility< / h3 >
Wide @font-face support means Font Awesome works in < a href = "#roadmap" rel = "tooltip" data-original-title = "IE7 support coming soon" > modern browsers < i class = "icon-info-sign" > < / i > < / a > .
< / div >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > < i class = "icon-thumbs-up icon-large" > < / i > Made for Twitter Bootstrap< / h3 >
Designed from scratch to be fully backwards compatible with < a href = "http://twitter.github.com/bootstrap/" target = "_blank" > Twitter Bootstrap 2.0< / a > .
< / div >
< div class = "span4" >
< h3 > < i class = "icon-refresh icon-large" > < / i > Growing set of icons< / h3 >
Ever expanding to support a wider array of web-related actions.
< / div >
< div class = "span4" >
2012-05-15 21:24:53 +00:00
< h3 > < i class = "icon-twitter icon-large" > < / i > Follow on Twitter< / h3 >
2012-03-09 05:02:49 +00:00
Follow < a href = "http://twitter.com/fortaweso_me/" target = "_blank" > @fortaweso_me< / a > on Twitter for icon updates and styling tricks.
< / div >
< / div >
< / section >
2012-05-15 21:24:53 +00:00
< section id = "new-icons" class = "row" >
< div class = "span12" >
< h1 > New Icons< / h1 >
2012-05-16 13:06:08 +00:00
< p > 63 shiny new icons added to Font Awesome 2.0.3. Yep. That puts us well over 200.< / p >
2012-05-15 21:24:53 +00:00
< / div >
< div class = "span12" >
< h2 > Parity with Twitter Bootstrap 2.0.3< / h2 >
< p > Twitter Bootstrap 2.0.3 added several new icons, which we have redesigned from scratch and added to Font Awesome 2.0.3< / p >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-hdd" > < / li >
< li class = "icon-bullhorn" > < / li >
< li class = "icon-bell" > < / li >
< li class = "icon-certificate" > < / li >
< li class = "icon-thumbs-up" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-thumbs-down" > < / li >
< li class = "icon-hand-right" > < / li >
< li class = "icon-hand-left" > < / li >
< li class = "icon-hand-up" > < / li >
< li class = "icon-hand-down" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-circle-arrow-left" > < / li >
< li class = "icon-circle-arrow-right" > < / li >
< li class = "icon-circle-arrow-up" > < / li >
< li class = "icon-circle-arrow-down" > < / li >
< li class = "icon-globe" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-wrench" > < / li >
< li class = "icon-tasks" > < / li >
< li class = "icon-filter" > < / li >
< li class = "icon-briefcase" > < / li >
< li class = "icon-fullscreen" > < / li >
< / ul >
< / div >
< div class = "span12" >
< h2 > User Requested< / h2 >
< p > You asked, Font Awesome delivered. Here's a giant new set of icons requested on the Font Awesome GitHub project.< / p >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-magic" > < / li >
< li class = "icon-phone" > < / li >
< li class = "icon-check-empty" > < / li >
< li class = "icon-bookmark-empty" > < / li >
< li class = "icon-phone-sign" > < / li >
< li class = "icon-twitter" > < / li >
< li class = "icon-facebook" > < / li >
< li class = "icon-github" > < / li >
< li class = "icon-unlock" > < / li >
< li class = "icon-credit-card" > < / li >
< li class = "icon-rss" > < / li >
< li class = "icon-group" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-link" > < / li >
< li class = "icon-cloud" > < / li >
< li class = "icon-beaker" > < / li >
< li class = "icon-cut" > < / li >
< li class = "icon-copy" > < / li >
< li class = "icon-paper-clip" > < / li >
< li class = "icon-save" > < / li >
< li class = "icon-sign-blank" > < / li >
< li class = "icon-reorder" > < / li >
< li class = "icon-ul" > < / li >
< li class = "icon-ol" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-strikethrough" > < / li >
< li class = "icon-underline" > < / li >
< li class = "icon-table" > < / li >
< li class = "icon-columns" > < / li >
< li class = "icon-truck" > < / li >
< li class = "icon-pinterest" > < / li >
< li class = "icon-pinterest-sign" > < / li >
< li class = "icon-google-plus-sign" > < / li >
< li class = "icon-google-plus" > < / li >
< li class = "icon-money" > < / li >
< li class = "icon-user-md" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-caret-down" > < / li >
< li class = "icon-caret-up" > < / li >
< li class = "icon-caret-left" > < / li >
< li class = "icon-caret-right" > < / li >
< li class = "icon-sort" > < / li >
< li class = "icon-sort-down" > < / li >
< li class = "icon-sort-up" > < / li >
< li class = "icon-chart-pie-empty" > < / li >
< li class = "icon-chart-pie-one-third" > < / li >
< li class = "icon-chart-pie-two-thirds" > < / li >
< li class = "icon-chart-pie-full" > < / li >
< / ul >
< / div >
< / section >
2012-03-09 05:02:49 +00:00
< section id = "base-icons" class = "row" >
< div class = "span12" >
< h1 > Base Icons< / h1 >
< p > Inspired by the Glyphicon set that comes with < a href = "http://twitter.github.com/bootstrap/" target = "_blank" > Twitter Bootstrap 2.0< / a > , Font Awesome is designed from scratch for a full array of web-related actions.< / p >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-glass" > < / li >
< li class = "icon-music" > < / li >
< li class = "icon-search" > < / li >
< li class = "icon-envelope" > < / li >
< li class = "icon-heart" > < / li >
< li class = "icon-star" > < / li >
< li class = "icon-star-empty" > < / li >
< li class = "icon-user" > < / li >
< li class = "icon-film" > < / li >
< li class = "icon-th-large" > < / li >
< li class = "icon-th" > < / li >
< li class = "icon-th-list" > < / li >
< li class = "icon-ok" > < / li >
< li class = "icon-remove" > < / li >
< li class = "icon-zoom-in" > < / li >
< li class = "icon-zoom-out" > < / li >
< li class = "icon-off" > < / li >
< li class = "icon-signal" > < / li >
< li class = "icon-cog" > < / li >
< li class = "icon-trash" > < / li >
< li class = "icon-home" > < / li >
< li class = "icon-file" > < / li >
< li class = "icon-time" > < / li >
< li class = "icon-road" > < / li >
< li class = "icon-download-alt" > < / li >
< li class = "icon-download" > < / li >
< li class = "icon-upload" > < / li >
< li class = "icon-inbox" > < / li >
< li class = "icon-play-circle" > < / li >
< li class = "icon-repeat" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-refresh" > < / li >
< li class = "icon-list-alt" > < / li >
< li class = "icon-lock" > < / li >
< li class = "icon-flag" > < / li >
< li class = "icon-headphones" > < / li >
< li class = "icon-volume-off" > < / li >
< li class = "icon-volume-down" > < / li >
< li class = "icon-volume-up" > < / li >
< li class = "icon-qrcode" > < / li >
< li class = "icon-barcode" > < / li >
< li class = "icon-tag" > < / li >
< li class = "icon-tags" > < / li >
< li class = "icon-book" > < / li >
< li class = "icon-bookmark" > < / li >
< li class = "icon-print" > < / li >
< li class = "icon-camera" > < / li >
< li class = "icon-font" > < / li >
< li class = "icon-bold" > < / li >
< li class = "icon-italic" > < / li >
< li class = "icon-text-height" > < / li >
< li class = "icon-text-width" > < / li >
< li class = "icon-align-left" > < / li >
< li class = "icon-align-center" > < / li >
< li class = "icon-align-right" > < / li >
< li class = "icon-align-justify" > < / li >
< li class = "icon-list" > < / li >
< li class = "icon-indent-left" > < / li >
< li class = "icon-indent-right" > < / li >
< li class = "icon-facetime-video" > < / li >
< li class = "icon-picture" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-pencil" > < / li >
< li class = "icon-map-marker" > < / li >
< li class = "icon-adjust" > < / li >
< li class = "icon-tint" > < / li >
< li class = "icon-edit" > < / li >
< li class = "icon-share" > < / li >
< li class = "icon-check" > < / li >
< li class = "icon-move" > < / li >
< li class = "icon-step-backward" > < / li >
< li class = "icon-fast-backward" > < / li >
< li class = "icon-backward" > < / li >
< li class = "icon-play" > < / li >
< li class = "icon-pause" > < / li >
< li class = "icon-stop" > < / li >
< li class = "icon-forward" > < / li >
< li class = "icon-fast-forward" > < / li >
< li class = "icon-step-forward" > < / li >
< li class = "icon-eject" > < / li >
< li class = "icon-chevron-left" > < / li >
< li class = "icon-chevron-right" > < / li >
< li class = "icon-plus-sign" > < / li >
< li class = "icon-minus-sign" > < / li >
< li class = "icon-remove-sign" > < / li >
< li class = "icon-ok-sign" > < / li >
< li class = "icon-question-sign" > < / li >
< li class = "icon-info-sign" > < / li >
< li class = "icon-screenshot" > < / li >
< li class = "icon-remove-circle" > < / li >
< li class = "icon-ok-circle" > < / li >
< li class = "icon-ban-circle" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-arrow-left" > < / li >
< li class = "icon-arrow-right" > < / li >
< li class = "icon-arrow-up" > < / li >
< li class = "icon-arrow-down" > < / li >
< li class = "icon-share-alt" > < / li >
< li class = "icon-resize-full" > < / li >
< li class = "icon-resize-small" > < / li >
< li class = "icon-plus" > < / li >
< li class = "icon-minus" > < / li >
< li class = "icon-asterisk" > < / li >
< li class = "icon-exclamation-sign" > < / li >
< li class = "icon-gift" > < / li >
< li class = "icon-leaf" > < / li >
< li class = "icon-fire" > < / li >
< li class = "icon-eye-open" > < / li >
< li class = "icon-eye-close" > < / li >
< li class = "icon-warning-sign" > < / li >
< li class = "icon-plane" > < / li >
< li class = "icon-calendar" > < / li >
< li class = "icon-random" > < / li >
< li class = "icon-comment" > < / li >
< li class = "icon-magnet" > < / li >
< li class = "icon-chevron-up" > < / li >
< li class = "icon-chevron-down" > < / li >
< li class = "icon-retweet" > < / li >
< li class = "icon-shopping-cart" > < / li >
< li class = "icon-folder-close" > < / li >
< li class = "icon-folder-open" > < / li >
< li class = "icon-resize-vertical" > < / li >
< li class = "icon-resize-horizontal" > < / li >
< / ul >
< / div >
< / section >
< section id = "extended-icons" class = "row" >
< div class = "span12" >
< h1 > Extended Icons< / h1 >
< p >
But wait, there's more! Font Awesome also includes this set of ever-expanding extra-awesome pictograms.
< / p >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-camera-retro" > < / li >
< li class = "icon-bar-chart" > < / li >
< li class = "icon-cogs" > < / li >
< li class = "icon-external-link" > < / li >
< li class = "icon-pushpin" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-facebook-sign" > < / li >
< li class = "icon-twitter-sign" > < / li >
< li class = "icon-linkedin-sign" > < / li >
< li class = "icon-github-sign" > < / li >
< li class = "icon-key" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-comments" > < / li >
< li class = "icon-trophy" > < / li >
< li class = "icon-upload-alt" > < / li >
< / ul >
< / div >
< div class = "span3" >
< ul class = "the-icons" >
< li class = "icon-signin" > < / li >
< li class = "icon-signout" > < / li >
< li class = "icon-star-half" > < / li >
< li class = "icon-heart-empty" > < / li >
< li class = "icon-lemon" > < / li >
< / ul >
< / div >
< / section >
< section id = "examples" >
< h1 > Examples< / h1 >
< p > Many examples re-used from the Twitter Bootstrap documentation.< / p >
< div class = "row" >
< div class = "span4" >
< div class = "well" >
< p > Use Font Awesome icons in:< / p >
< ul >
< li class = "icon-ok" > Bulleted lists (like this one)< / li >
< li class = "icon-ok" > Buttons< / li >
< li class = "icon-ok" > Button groups< / li >
< li class = "icon-ok" > Navigation< / li >
< li class = "icon-ok" > Prepended form inputs< / li >
< li class = "icon-ok" > And many more with Custom CSS< / li >
< / ul >
< / div >
< / div >
< div class = "span4" >
< p >
< 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-danger" href = "#" > < i class = "icon-trash icon-large" > < / i > Delete< / a >
< / p >
< p >
< a class = "btn btn-large btn-primary" href = "#" > < i class = "icon-comment" > < / i > Comment< / a >
< a class = "btn btn-small" 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 >
< / p >
< div class = "well" style = "padding: 8px 0;" >
< 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 >
< / div >
< / div >
< div class = "span4" >
< div class = "btn-toolbar" >
< 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-chevron-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 >
< / div >
< form >
< div class = "control-group" >
< div class = "controls" >
< div class = "input-prepend" >
< span class = "add-on" > < i class = "icon-envelope" > < / i > < / span >
< input class = "span2" id = "inputIcon" type = "text" placeholder = "Email address" >
< / div >
< / div >
< / div >
< div class = "control-group" >
< div class = "controls" >
< div class = "input-prepend" >
< span class = "add-on" > < i class = "icon-key" > < / i > < / span >
< input class = "span2" id = "inputIcon2" type = "text" placeholder = "Password" >
< / div >
< / div >
< / div >
< / form >
< div >
< span class = "rating" >
< span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span >
< / span >
< / div >
< / div >
< / div >
< / section >
< section id = "integration" >
< h1 > Integration< / h1 >
< p > It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.< / p >
< div class = "row" >
< div class = "span3" >
< h3 > Bootstrap using LESS< / h3 >
< p > Use this method if integrating with Twitter Bootstrap using LESS< / p >
< / div >
< div class = "span9" >
< ol >
< li > Copy the Font Awesome font directory into your project.< / li >
< li > Copy font-awesome.less into your bootstrap/less directory.< / li >
< li > Open bootstrap.less and replace < code > @import "sprites.less";< / code > with < code > @import "font-awesome.less";< / code > < / li >
< li >
Open your project's font-awesome.less and edit the font url to ensure it points to the right place.
< pre class = "prettyprint linenums" >
@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.svgz#FontAwesomeRegular') format('svg'),
url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
< / pre >
< / li >
< li > Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.< / li >
< li > Check out the examples to start using Font Awesome!< / li >
< / ol >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Bootstrap using CSS< / h3 >
< p > Use this method if integrating with Twitter Bootstrap using CSS.< / p >
< / div >
< div class = "span9" >
< ol >
< li > Copy the Font Awesome font directory into your project.< / li >
< li > Copy font-awesome.css into your project.< / li >
< li > Open your project's font-awesome.css and edit the font url to ensure it points to the right place (see above example).< / li >
< li >
In the < code > < head> < / code > of your html, reference the location to your font-awesome.css.
< pre class = "prettyprint linenums" >
< link rel="stylesheet" href="../css/bootstrap.css">
< link rel="stylesheet" href="../css/font-awesome.css">
< / pre >
< / li >
< li > Check out the examples to start using Font Awesome!< / li >
< / ol >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Not using Bootstrap?< / h3 >
< p > Font Awesome works just as well without Twitter Bootstrap.< / p >
< / div >
< div class = "span9" >
< ol >
< li > Copy the Font Awesome font directory into your project.< / li >
< li > Copy font-awesome.less or font-awesome.css into your project.< / li >
< li > Open your project's font-awesome.less or font-awesome.css and edit the font url to ensure it points to the right place (see above example).< / li >
< li > Check out the examples to start using Font Awesome!< / li >
< / ol >
< / div >
< / div >
< / section >
< section id = "code" >
< h1 > Code< / h1 >
< div class = "row" >
< div class = "span3" >
< h3 > Inline Icon< / h3 >
< p > Place Font Awesome icons just about anywhere with the < code > < i> < / code > tag.< / p >
< / div >
< div class = "span9" >
< div class = "well" >
< div style = "font-size: 24px;" >
< i class = "icon-camera-retro" > < / i > icon-camera-retro
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div style="font-size: 24px;">
< i class="icon-camera-retro"> < /i> icon-camera-retro
< /div>
< / pre >
2012-05-16 13:06:08 +00:00
< div class = "alert alert-info" > < i class = "icon-info-sign" > < / i > Icon classes are echoed via CSS :before.< / div >
2012-03-09 05:02:49 +00:00
< p > Increase the icon size by using the < code > icon-large< / code > class. This increases the size by 33% relative to the font-size of the container.< / p >
< div class = "well" >
< div style = "font-size: 24px;" >
< i class = "icon-camera-retro icon-large" > < / i > icon-camera-retro
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div style="font-size: 24px;">
< i class="icon-camera-retro icon-large"> < /i> icon-camera-retro
< /div>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Buttons< / h3 >
< p >
< p >
< 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 >
< / p >
< p >
< a class = "btn btn-large btn-primary" href = "#" >
< i class = "icon-comment" > < / i > Comment< / a >
< a class = "btn btn-danger" href = "#" >
< i class = "icon-trash icon-large" > < / i > Delete< / a >
< / p >
< p >
< a class = "btn btn-small" 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 >
< / p >
< / p >
< / div >
< div class = "span9" >
< p > Font Awesome icons work great in buttons.< / p >
< pre class = "prettyprint linenums" >
< 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-primary" href="#">
< i class="icon-comment"> < /i> Comment< /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-small btn-info" href="#">
< i class="icon-info-sign"> < /i> More Info< /a>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Button groups< / h3 >
< p >
< 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 >
< / p >
< / div >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Button dropdowns< / h3 >
< p >
< 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-chevron-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 >
< / div >
< / p >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< 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-chevron-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>
< / pre >
< div class = "alert alert-info" > < i class = "icon-info-sign" > < / i > Don't forget to add the appropriate JavaScript to enable button dropdowns.< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Lists< / h3 >
< p >
< ul >
< li class = "icon-ok" > Lists< / li >
< li class = "icon-ok" > Buttons< / li >
< li class = "icon-ok" > Button groups< / li >
< li class = "icon-ok" > Navigation< / li >
< li class = "icon-ok" > Prepended form inputs< / li >
< / ul >
< / p >
< / div >
< div class = "span9" >
< p > Easily replace individual bullets.< / p >
< pre class = "prettyprint linenums" >
< ul>
< li class="icon-ok"> Lists< /li>
< li class="icon-ok"> Buttons< /li>
< li class="icon-ok"> Button groups< /li>
< li class="icon-ok"> Navigation< /li>
< li class="icon-ok"> Prepended form inputs< /li>
< /ul>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Navigation< / h3 >
< div class = "well" style = "padding: 8px 0;" >
< 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 >
< / div >
< / div >
< div class = "span9" >
< p > Use Font Awesome icons in navigation to provide helpful visual cues.< / p >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Prepended form inputs< / h3 >
< p >
< 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 >
< / p >
< / div >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< 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>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Custom CSS< / h3 >
< p > Anything you can do with CSS font effects, you can do with Font Awesome.< / p >
< / div >
< div class = "span9" >
< p > Star Ratings (inspired by < a href = "http://css-tricks.com/star-ratings/" target = "_blank" > CSS Tricks< / a > )< / p >
< div class = "well" >
< span class = "rating" >
< span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span > < span class = "star" > < / span >
< / span >
< / div >
< / div >
< / div >
< / section >
< section id = "roadmap" >
< h1 > Roadmap< / h1 >
< p > Here's the plan for future updates.< / p >
< ul >
< li class = "icon-plus" > Support for IE7.< / li >
< li class = "icon-plus" > Better hinting for smaller font sizes.< / li >
< li class = "icon-plus" > More icons. Have any requests? < a href = "https://github.com/FortAwesome/Font-Awesome/issues" target = "_blank" > Open an issue< / a > in the Font Awesome GitHub project.< / li >
< li class = "icon-plus" > More complete Twitter Bootstrap compatibility.< / li >
< li class = "icon-plus" > Tricks and tips for super-awesome creative CSS methods, like the star example above.< / li >
< / ul >
< / section >
< footer >
< div class = "row" >
< div class = "span4" >
< h2 > Contact< / h2 >
< ul >
< li class = "icon-envelope" > Email: < a href = "mailto:dave@davegandy.com" > Dave Gandy< / a > < / li >
2012-05-16 13:06:08 +00:00
< li class = "icon-twitter" > Twitter: < a href = "http://twitter.com/fortaweso_me/" target = "_blank" > @FortAweso_me< / a > < / li >
< li class = "icon-wrench" > Work: < a href = "http://kyruus.com" target = "_blank" > Kyruus< / a > Lead Product Designer< / li >
2012-03-09 05:02:49 +00:00
< / ul >
< / div >
< div class = "span8" >
< h2 > License< / h2 >
The Font Awesome webfont, CSS, and LESS files are licensed under
< a href = "http://creativecommons.org/licenses/by/3.0/" target = "_blank" > CC BY 3.0< / a > .
A mention of < code > Font Awesome - http://fortawesome.github.com/Font-Awesome< / code > in human-readable source code
is considered acceptable attribution (most common on the web). If human readable source code is not available to
the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or
mobile software).
< / div >
< div class = "span12" >
< h2 > Special Thanks< / h2 >
Special thanks to < a href = "http://twitter.com/robmadole/" target = "_blank" > @robmadole< / a > and
< a href = "http://twitter.com/supercodepoet/" target = "_blank" > @supercodepoet< / a > for icon design
review, advice, and some backbone.js help.
< / div >
< / div >
< / footer >
< / div >
< script type = "text/template" id = "modal-template" >
< div class = "modal hide fade in" >
< div class = "modal-header" >
< a class = "close" data-dismiss = "modal" > < i class = "icon-remove" > < / i > < / a >
< h3 > < %= style %>< / h3 >
< / div >
< div class = "modal-body" >
< div class = "row" >
< div class = "span3 icon6" >
< div class = "thumbnail" >
< div > < i class = "<%= style %>" > < / i > < / div >
340px
< / div >
< / div >
< div class = "span3 icon5" >
< div class = "thumbnail" >
< div > < i class = "<%= style %>" > < / i > < / div >
180px
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "span2 icon4" >
< div class = "thumbnail" >
< div > < i class = "<%= style %>" > < / i > < / div >
100px
< / div >
< / div >
< div class = "span2 icon3" >
< div class = "thumbnail" >
< div > < i class = "<%= style %>" > < / i > < / div >
50px
< / div >
< / div >
< div class = "span1 icon2" >
< div class = "thumbnail" >
< div > < i class = "<%= style %>" > < / i > < / div >
20px
< / div >
< / div >
< div class = "span1 icon1" >
< div class = "thumbnail" >
< div > < i class = "<%= style %>" > < / i > < / div >
12 px
< / div >
< / div >
< / div >
< / div >
< / div >
< / script >
< script src = "assets/js/jquery-1.7.1.min.js" > < / script >
< script src = "assets/js/underscore.min.js" > < / script >
< script src = "assets/js/backbone.min.js" > < / script >
< script src = "assets/js/prettify.min.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-transition.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-alert.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-modal.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-dropdown.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-scrollspy.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-tab.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-tooltip.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-popover.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-button.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-collapse.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-carousel.js" > < / script >
< script src = "assets/js/tw-bs-201/bootstrap-typeahead.js" > < / script >
< script src = "assets/js/index/index.js" > < / script >
< script type = "text/javascript" >
$(function(){
$('#iconCarousel').carousel({
interval: 5000
});
// tooltips
$('#why').tooltip({
selector: "a[rel=tooltip]",
placement: 'bottom'
})
// make code pretty
window.prettyPrint & & prettyPrint();
});
< / script >
< / body >
< / html >
