2012-03-09 13:02:49 +08: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 >
2012-05-20 00:33:53 +08:00
<!-- 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 >
2012-05-16 21:06:08 +08:00
<![endif]-->
2012-03-09 13:02:49 +08:00
2012-05-20 00:33:53 +08:00
<!-- CSS
================================================== -->
< link rel = "stylesheet" href = "assets/css/site.css" >
< link rel = "stylesheet" href = "assets/css/prettify.css" >
<!-- [if IE 7]>
< link rel = "stylesheet" href = "assets/css/font-awesome-ie7.css" >
<![endif]-->
2012-05-16 21:06:08 +08:00
<!-- Le fav and touch icons -->
2012-05-20 00:33:53 +08:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-03-09 13:02:49 +08:00
< / head >
< body >
<!-- for navigation -->
< div id = "overview" > < / div >
< div class = "navbar navbar-fixed-top" >
< div class = "navbar-inner" >
< div class = "container" >
2012-05-21 21:06:58 +08:00
< h3 > < a class = "brand" href = "#" > < i class = "ficon-flag" > < / i > Font Awesome< / a > < / h3 >
2012-03-09 13:02:49 +08:00
< 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" >
2012-05-21 21:06:58 +08:00
< li > < a href = "mailto:dave@davegandy.com" > < i class = "ficon-envelope" > < / i > Me< / a > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
< div class = "hero-unit" >
2012-05-21 21:06:58 +08:00
< div id = "iconCarousel" class = "carousel slide" >
2012-03-09 13:02:49 +08:00
<!-- Carousel items -->
< div class = "carousel-inner" >
2012-05-21 21:06:58 +08:00
< div class = "active item" > < div > < i class = "ficon-flag" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-star-empty" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-fire" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-envelope" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-leaf" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-key" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-pushpin" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-cogs" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-book" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-film" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-tint" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-edit" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-search" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-home" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-calendar" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-picture" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-headphones" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-heart-empty" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-thumbs-up" > < / i > < / div > < / div >
< div class = "item" > < div > < i class = "ficon-flag" > < / i > < / div > < / div >
2012-03-09 13:02:49 +08:00
< / div >
<!-- Carousel nav -->
2012-05-21 21:06:58 +08:00
< a class = "carousel-control left" href = "#iconCarousel" data-slide = "prev" > < i class = "ficon-arrow-left" > < / i > < / a >
< a class = "carousel-control right" href = "#iconCarousel" data-slide = "next" > < i class = "ficon-arrow-right" > < / i > < / a >
2012-03-09 13:02:49 +08:00
< / div >
< div class = "hero-content" >
< h1 > Font Awesome< / h1 >
< p > The iconic font designed for use with Twitter Bootstrap< / p >
< div class = "actions" >
2012-05-21 21:06:58 +08:00
< a class = "btn btn-primary btn-large" href = "https://github.com/FortAwesome/Font-Awesome/zipball/master" > < i class = "ficon-download" > < / i > Download< br > Font Awesome< / a >
< a class = "btn btn-large btn-github" href = "https://github.com/FortAwesome/Font-Awesome" > < i class = "ficon-github" > < / i > View Project< br > on GitHub< / a >
2012-03-09 13:02:49 +08:00
< / div >
< / div >
< / div >
< section id = "why" >
< div class = "row" >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-flag ficon-large" > < / i > One font, 200+ icons< / h3 >
2012-03-09 13:02:49 +08:00
In a single collection, Font Awesome is a pictographic language of web-related actions.
< / div >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-gift ficon-large" > < / i > Free for commercial use< / h3 >
2012-03-09 13:02:49 +08:00
The Font Awesome webfont and CSS libraries are completely free for commercial use.
< / div >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-search ficon-large" > < / i > Screen reader compatible< / h3 >
2012-03-09 13:02:49 +08:00
Font Awesome won't trip up screen readers, unlike most icon fonts.
< / div >
< / div >
< div class = "row" >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-resize-full ficon-large" > < / i > Infinite scalability< / h3 >
2012-03-09 13:02:49 +08:00
Scalable vector graphics means icons look awesome at any size.
< / div >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-pencil ficon-large" > < / i > CSS control< / h3 >
2012-03-09 13:02:49 +08:00
Easily style icon color, size, shadow, and anything that's possible with CSS.
< / div >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-ok ficon-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 = "ficon-info-sign" > < / i > < / a > .
2012-03-09 13:02:49 +08:00
< / div >
< / div >
< div class = "row" >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-thumbs-up ficon-large" > < / i > Made for Twitter Bootstrap< / h3 >
2012-03-09 13:02:49 +08:00
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" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-refresh ficon-large" > < / i > Growing set of icons< / h3 >
2012-03-09 13:02:49 +08:00
Ever expanding to support a wider array of web-related actions.
< / div >
< div class = "span4" >
2012-05-21 21:06:58 +08:00
< h3 > < i class = "ficon-twitter ficon-large" > < / i > Follow on Twitter< / h3 >
2012-03-09 13:02:49 +08: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-16 05:24:53 +08:00
< section id = "new-icons" class = "row" >
< div class = "span12" >
< h1 > New Icons< / h1 >
2012-05-16 21:06:08 +08:00
< p > 63 shiny new icons added to Font Awesome 2.0.3. Yep. That puts us well over 200.< / p >
2012-05-16 05:24:53 +08: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" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-hdd" > < / i > ficon-hdd< / li > < / li >
< li > < i class = "ficon-bullhorn" > < / i > ficon-bullhorn< / li > < / li >
< li > < i class = "ficon-bell" > < / i > ficon-bell< / li > < / li >
< li > < i class = "ficon-certificate" > < / i > ficon-certificate< / li > < / li >
< li > < i class = "ficon-thumbs-up" > < / i > ficon-thumbs-up< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-thumbs-down" > < / i > ficon-thumbs-down< / li > < / li >
< li > < i class = "ficon-hand-right" > < / i > ficon-hand-right< / li > < / li >
< li > < i class = "ficon-hand-left" > < / i > ficon-hand-left< / li > < / li >
< li > < i class = "ficon-hand-up" > < / i > ficon-hand-up< / li > < / li >
< li > < i class = "ficon-hand-down" > < / i > ficon-hand-down< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-circle-arrow-left" > < / i > ficon-circle-arrow-left< / li > < / li >
< li > < i class = "ficon-circle-arrow-right" > < / i > ficon-circle-arrow-right< / li > < / li >
< li > < i class = "ficon-circle-arrow-up" > < / i > ficon-circle-arrow-up< / li > < / li >
< li > < i class = "ficon-circle-arrow-down" > < / i > ficon-circle-arrow-down< / li > < / li >
< li > < i class = "ficon-globe" > < / i > ficon-globe< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-wrench" > < / i > ficon-wrench< / li > < / li >
< li > < i class = "ficon-tasks" > < / i > ficon-tasks< / li > < / li >
< li > < i class = "ficon-filter" > < / i > ficon-filter< / li > < / li >
< li > < i class = "ficon-briefcase" > < / i > ficon-briefcase< / li > < / li >
< li > < i class = "ficon-fullscreen" > < / i > ficon-fullscreen< / li > < / li >
2012-05-16 05:24:53 +08:00
< / 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" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-magic" > < / i > ficon-magic< / li > < / li >
< li > < i class = "ficon-phone" > < / i > ficon-phone< / li > < / li >
< li > < i class = "ficon-check-empty" > < / i > ficon-check-empty< / li > < / li >
< li > < i class = "ficon-bookmark-empty" > < / i > ficon-bookmark-empty< / li > < / li >
< li > < i class = "ficon-phone-sign" > < / i > ficon-phone-sign< / li > < / li >
< li > < i class = "ficon-twitter" > < / i > ficon-twitter< / li > < / li >
< li > < i class = "ficon-facebook" > < / i > ficon-facebook< / li > < / li >
< li > < i class = "ficon-github" > < / i > ficon-github< / li > < / li >
< li > < i class = "ficon-unlock" > < / i > ficon-unlock< / li > < / li >
< li > < i class = "ficon-credit-card" > < / i > ficon-credit-card< / li > < / li >
< li > < i class = "ficon-rss" > < / i > ficon-rss< / li > < / li >
< li > < i class = "ficon-group" > < / i > ficon-group< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-link" > < / i > ficon-link< / li > < / li >
< li > < i class = "ficon-cloud" > < / i > ficon-cloud< / li > < / li >
< li > < i class = "ficon-beaker" > < / i > ficon-beaker< / li > < / li >
< li > < i class = "ficon-cut" > < / i > ficon-cut< / li > < / li >
< li > < i class = "ficon-copy" > < / i > ficon-copy< / li > < / li >
< li > < i class = "ficon-paper-clip" > < / i > ficon-paper-clip< / li > < / li >
< li > < i class = "ficon-save" > < / i > ficon-save< / li > < / li >
< li > < i class = "ficon-sign-blank" > < / i > ficon-sign-blank< / li > < / li >
< li > < i class = "ficon-reorder" > < / i > ficon-reorder< / li > < / li >
< li > < i class = "ficon-ul" > < / i > ficon-ul< / li > < / li >
< li > < i class = "ficon-ol" > < / i > ficon-ol< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-strikethrough" > < / i > ficon-strikethrough< / li > < / li >
< li > < i class = "ficon-underline" > < / i > ficon-underline< / li > < / li >
< li > < i class = "ficon-table" > < / i > ficon-table< / li > < / li >
< li > < i class = "ficon-columns" > < / i > ficon-columns< / li > < / li >
< li > < i class = "ficon-truck" > < / i > ficon-truck< / li > < / li >
< li > < i class = "ficon-pinterest" > < / i > ficon-pinterest< / li > < / li >
< li > < i class = "ficon-pinterest-sign" > < / i > ficon-pinterest-sign< / li > < / li >
< li > < i class = "ficon-google-plus-sign" > < / i > ficon-google-plus-sign< / li > < / li >
< li > < i class = "ficon-google-plus" > < / i > ficon-google-plus< / li > < / li >
< li > < i class = "ficon-money" > < / i > ficon-money< / li > < / li >
< li > < i class = "ficon-user-md" > < / i > ficon-user-md< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-caret-down" > < / i > ficon-caret-down< / li > < / li >
< li > < i class = "ficon-caret-up" > < / i > ficon-caret-up< / li > < / li >
< li > < i class = "ficon-caret-left" > < / i > ficon-caret-left< / li > < / li >
< li > < i class = "ficon-caret-right" > < / i > ficon-caret-right< / li > < / li >
< li > < i class = "ficon-sort" > < / i > ficon-sort< / li > < / li >
< li > < i class = "ficon-sort-down" > < / i > ficon-sort-down< / li > < / li >
< li > < i class = "ficon-sort-up" > < / i > ficon-sort-up< / li > < / li >
< li > < i class = "ficon-chart-pie-empty" > < / i > ficon-chart-pie-empty< / li > < / li >
< li > < i class = "ficon-chart-pie-one-third" > < / i > ficon-chart-pie-one-third< / li > < / li >
< li > < i class = "ficon-chart-pie-two-thirds" > < / i > ficon-chart-pie-two-thirds< / li > < / li >
< li > < i class = "ficon-chart-pie-full" > < / i > ficon-chart-pie-full< / li > < / li >
2012-05-16 05:24:53 +08:00
< / ul >
< / div >
< / section >
2012-03-09 13:02:49 +08: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" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-glass" > < / i > ficon-glass< / li > < / li >
< li > < i class = "ficon-music" > < / i > ficon-music< / li > < / li >
< li > < i class = "ficon-search" > < / i > ficon-search< / li > < / li >
< li > < i class = "ficon-envelope" > < / i > ficon-envelope< / li > < / li >
< li > < i class = "ficon-heart" > < / i > ficon-heart< / li > < / li >
< li > < i class = "ficon-star" > < / i > ficon-star< / li > < / li >
< li > < i class = "ficon-star-empty" > < / i > ficon-star-empty< / li > < / li >
< li > < i class = "ficon-user" > < / i > ficon-user< / li > < / li >
< li > < i class = "ficon-film" > < / i > ficon-film< / li > < / li >
< li > < i class = "ficon-th-large" > < / i > ficon-th-large< / li > < / li >
< li > < i class = "ficon-th" > < / i > ficon-th< / li > < / li >
< li > < i class = "ficon-th-list" > < / i > ficon-th-list< / li > < / li >
< li > < i class = "ficon-ok" > < / i > ficon-ok< / li > < / li >
< li > < i class = "ficon-remove" > < / i > ficon-remove< / li > < / li >
< li > < i class = "ficon-zoom-in" > < / i > ficon-zoom-in< / li > < / li >
2012-03-09 13:02:49 +08:00
2012-05-21 21:06:58 +08:00
< li > < i class = "ficon-zoom-out" > < / i > ficon-zoom-out< / li > < / li >
< li > < i class = "ficon-off" > < / i > ficon-off< / li > < / li >
< li > < i class = "ficon-signal" > < / i > ficon-signal< / li > < / li >
< li > < i class = "ficon-cog" > < / i > ficon-cog< / li > < / li >
< li > < i class = "ficon-trash" > < / i > ficon-trash< / li > < / li >
< li > < i class = "ficon-home" > < / i > ficon-home< / li > < / li >
< li > < i class = "ficon-file" > < / i > ficon-file< / li > < / li >
< li > < i class = "ficon-time" > < / i > ficon-time< / li > < / li >
< li > < i class = "ficon-road" > < / i > ficon-road< / li > < / li >
< li > < i class = "ficon-download-alt" > < / i > ficon-download-alt< / li > < / li >
< li > < i class = "ficon-download" > < / i > ficon-download< / li > < / li >
< li > < i class = "ficon-upload" > < / i > ficon-upload< / li > < / li >
< li > < i class = "ficon-inbox" > < / i > ficon-inbox< / li > < / li >
< li > < i class = "ficon-play-circle" > < / i > ficon-play-circle< / li > < / li >
< li > < i class = "ficon-repeat" > < / i > ficon-repeat< / li > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-refresh" > < / i > ficon-refresh< / li > < / li >
< li > < i class = "ficon-list-alt" > < / i > ficon-list-alt< / li > < / li >
< li > < i class = "ficon-lock" > < / i > ficon-lock< / li > < / li >
< li > < i class = "ficon-flag" > < / i > ficon-flag< / li > < / li >
< li > < i class = "ficon-headphones" > < / i > ficon-headphones< / li > < / li >
< li > < i class = "ficon-volume-off" > < / i > ficon-volume-off< / li > < / li >
< li > < i class = "ficon-volume-down" > < / i > ficon-volume-down< / li > < / li >
< li > < i class = "ficon-volume-up" > < / i > ficon-volume-up< / li > < / li >
< li > < i class = "ficon-qrcode" > < / i > ficon-qrcode< / li > < / li >
< li > < i class = "ficon-barcode" > < / i > ficon-barcode< / li > < / li >
< li > < i class = "ficon-tag" > < / i > ficon-tag< / li > < / li >
< li > < i class = "ficon-tags" > < / i > ficon-tags< / li > < / li >
< li > < i class = "ficon-book" > < / i > ficon-book< / li > < / li >
< li > < i class = "ficon-bookmark" > < / i > ficon-bookmark< / li > < / li >
< li > < i class = "ficon-print" > < / i > ficon-print< / li > < / li >
2012-03-09 13:02:49 +08:00
2012-05-21 21:06:58 +08:00
< li > < i class = "ficon-camera" > < / i > ficon-camera< / li > < / li >
< li > < i class = "ficon-font" > < / i > ficon-font< / li > < / li >
< li > < i class = "ficon-bold" > < / i > ficon-bold< / li > < / li >
< li > < i class = "ficon-italic" > < / i > ficon-italic< / li > < / li >
< li > < i class = "ficon-text-height" > < / i > ficon-text-height< / li > < / li >
< li > < i class = "ficon-text-width" > < / i > ficon-text-width< / li > < / li >
< li > < i class = "ficon-align-left" > < / i > ficon-align-left< / li > < / li >
< li > < i class = "ficon-align-center" > < / i > ficon-align-center< / li > < / li >
< li > < i class = "ficon-align-right" > < / i > ficon-align-right< / li > < / li >
< li > < i class = "ficon-align-justify" > < / i > ficon-align-justify< / li > < / li >
< li > < i class = "ficon-list" > < / i > ficon-list< / li > < / li >
< li > < i class = "ficon-indent-left" > < / i > ficon-indent-left< / li > < / li >
< li > < i class = "ficon-indent-right" > < / i > ficon-indent-right< / li > < / li >
< li > < i class = "ficon-facetime-video" > < / i > ficon-facetime-video< / li > < / li >
< li > < i class = "ficon-picture" > < / i > ficon-picture< / li > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-pencil" > < / i > ficon-pencil< / li > < / li >
< li > < i class = "ficon-map-marker" > < / i > ficon-map-marker< / li > < / li >
< li > < i class = "ficon-adjust" > < / i > ficon-adjust< / li > < / li >
< li > < i class = "ficon-tint" > < / i > ficon-tint< / li > < / li >
< li > < i class = "ficon-edit" > < / i > ficon-edit< / li > < / li >
< li > < i class = "ficon-share" > < / i > ficon-share< / li > < / li >
< li > < i class = "ficon-check" > < / i > ficon-check< / li > < / li >
< li > < i class = "ficon-move" > < / i > ficon-move< / li > < / li >
< li > < i class = "ficon-step-backward" > < / i > ficon-step-backward< / li > < / li >
< li > < i class = "ficon-fast-backward" > < / i > ficon-fast-backward< / li > < / li >
< li > < i class = "ficon-backward" > < / i > ficon-backward< / li > < / li >
< li > < i class = "ficon-play" > < / i > ficon-play< / li > < / li >
< li > < i class = "ficon-pause" > < / i > ficon-pause< / li > < / li >
< li > < i class = "ficon-stop" > < / i > ficon-stop< / li > < / li >
< li > < i class = "ficon-forward" > < / i > ficon-forward< / li > < / li >
2012-03-09 13:02:49 +08:00
2012-05-21 21:06:58 +08:00
< li > < i class = "ficon-fast-forward" > < / i > ficon-fast-forward< / li > < / li >
< li > < i class = "ficon-step-forward" > < / i > ficon-step-forward< / li > < / li >
< li > < i class = "ficon-eject" > < / i > ficon-eject< / li > < / li >
< li > < i class = "ficon-chevron-left" > < / i > ficon-chevron-left< / li > < / li >
< li > < i class = "ficon-chevron-right" > < / i > ficon-chevron-right< / li > < / li >
< li > < i class = "ficon-plus-sign" > < / i > ficon-plus-sign< / li > < / li >
< li > < i class = "ficon-minus-sign" > < / i > ficon-minus-sign< / li > < / li >
< li > < i class = "ficon-remove-sign" > < / i > ficon-remove-sign< / li > < / li >
< li > < i class = "ficon-ok-sign" > < / i > ficon-ok-sign< / li > < / li >
< li > < i class = "ficon-question-sign" > < / i > ficon-question-sign< / li > < / li >
< li > < i class = "ficon-info-sign" > < / i > ficon-info-sign< / li > < / li >
< li > < i class = "ficon-screenshot" > < / i > ficon-screenshot< / li > < / li >
< li > < i class = "ficon-remove-circle" > < / i > ficon-remove-circle< / li > < / li >
< li > < i class = "ficon-ok-circle" > < / i > ficon-ok-circle< / li > < / li >
< li > < i class = "ficon-ban-circle" > < / i > ficon-ban-circle< / li > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-arrow-left" > < / i > ficon-arrow-left< / li > < / li >
< li > < i class = "ficon-arrow-right" > < / i > ficon-arrow-right< / li > < / li >
< li > < i class = "ficon-arrow-up" > < / i > ficon-arrow-up< / li > < / li >
< li > < i class = "ficon-arrow-down" > < / i > ficon-arrow-down< / li > < / li >
< li > < i class = "ficon-share-alt" > < / i > ficon-share-alt< / li > < / li >
< li > < i class = "ficon-resize-full" > < / i > ficon-resize-full< / li > < / li >
< li > < i class = "ficon-resize-small" > < / i > ficon-resize-small< / li > < / li >
< li > < i class = "ficon-plus" > < / i > ficon-plus< / li > < / li >
< li > < i class = "ficon-minus" > < / i > ficon-minus< / li > < / li >
< li > < i class = "ficon-asterisk" > < / i > ficon-asterisk< / li > < / li >
< li > < i class = "ficon-exclamation-sign" > < / i > ficon-exclamation-sign< / li > < / li >
< li > < i class = "ficon-gift" > < / i > ficon-gift< / li > < / li >
< li > < i class = "ficon-leaf" > < / i > ficon-leaf< / li > < / li >
< li > < i class = "ficon-fire" > < / i > ficon-fire< / li > < / li >
< li > < i class = "ficon-eye-open" > < / i > ficon-eye-open< / li > < / li >
2012-03-09 13:02:49 +08:00
2012-05-21 21:06:58 +08:00
< li > < i class = "ficon-eye-close" > < / i > ficon-eye-close< / li > < / li >
< li > < i class = "ficon-warning-sign" > < / i > ficon-warning-sign< / li > < / li >
< li > < i class = "ficon-plane" > < / i > ficon-plane< / li > < / li >
< li > < i class = "ficon-calendar" > < / i > ficon-calendar< / li > < / li >
< li > < i class = "ficon-random" > < / i > ficon-random< / li > < / li >
< li > < i class = "ficon-comment" > < / i > ficon-comment< / li > < / li >
< li > < i class = "ficon-magnet" > < / i > ficon-magnet< / li > < / li >
< li > < i class = "ficon-chevron-up" > < / i > ficon-chevron-up< / li > < / li >
< li > < i class = "ficon-chevron-down" > < / i > ficon-chevron-down< / li > < / li >
< li > < i class = "ficon-retweet" > < / i > ficon-retweet< / li > < / li >
< li > < i class = "ficon-shopping-cart" > < / i > ficon-shopping-cart< / li > < / li >
< li > < i class = "ficon-folder-close" > < / i > ficon-folder-close< / li > < / li >
< li > < i class = "ficon-folder-open" > < / i > ficon-folder-open< / li > < / li >
< li > < i class = "ficon-resize-vertical" > < / i > ficon-resize-vertical< / li > < / li >
< li > < i class = "ficon-resize-horizontal" > < / i > ficon-resize-horizontal< / li > < / li >
2012-03-09 13:02:49 +08:00
< / 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" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-camera-retro" > < / i > ficon-camera-retro< / li > < / li >
< li > < i class = "ficon-bar-chart" > < / i > ficon-bar-chart< / li > < / li >
< li > < i class = "ficon-cogs" > < / i > ficon-cogs< / li > < / li >
< li > < i class = "ficon-external-link" > < / i > ficon-external-link< / li > < / li >
< li > < i class = "ficon-pushpin" > < / i > ficon-pushpin< / li > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-facebook-sign" > < / i > ficon-facebook-sign< / li > < / li >
< li > < i class = "ficon-twitter-sign" > < / i > ficon-twitter-sign< / li > < / li >
< li > < i class = "ficon-linkedin-sign" > < / i > ficon-linkedin-sign< / li > < / li >
< li > < i class = "ficon-github-sign" > < / i > ficon-github-sign< / li > < / li >
< li > < i class = "ficon-key" > < / i > ficon-key< / li > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-comments" > < / i > ficon-comments< / li > < / li >
< li > < i class = "ficon-trophy" > < / i > ficon-trophy< / li > < / li >
< li > < i class = "ficon-upload-alt" > < / i > ficon-upload-alt< / li > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< div class = "span3" >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-signin" > < / i > ficon-signin< / li > < / li >
< li > < i class = "ficon-signout" > < / i > ficon-signout< / li > < / li >
< li > < i class = "ficon-star-half" > < / i > ficon-star-half< / li > < / li >
< li > < i class = "ficon-heart-empty" > < / i > ficon-heart-empty< / li > < / li >
< li > < i class = "ficon-lemon" > < / i > ficon-lemon< / li > < / li >
2012-03-09 13:02:49 +08:00
< / 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 >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-ok" > < / i > Bulleted lists (like this one)< / li >
< li > < i class = "ficon-ok" > < / i > Buttons< / li >
< li > < i class = "ficon-ok" > < / i > Button groups< / li >
< li > < i class = "ficon-ok" > < / i > Navigation< / li >
< li > < i class = "ficon-ok" > < / i > Prepended form inputs< / li >
< li > < i class = "ficon-ok" > < / i > And many more with Custom CSS< / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< / div >
< div class = "span4" >
< p >
2012-05-21 21:06:58 +08:00
< a class = "btn" href = "#" > < i class = "ficon-refresh" > < / i > Refresh< / a >
< a class = "btn btn-success" href = "#" > < i class = "ficon-shopping-cart ficon-large" > < / i > Checkout< / a >
< a class = "btn btn-danger" href = "#" > < i class = "ficon-trash ficon-large" > < / i > Delete< / a >
2012-03-09 13:02:49 +08:00
< / p >
< p >
2012-05-21 21:06:58 +08:00
< a class = "btn btn-large btn-primary" href = "#" > < i class = "ficon-comment" > < / i > Comment< / a >
< a class = "btn btn-small" href = "#" > < i class = "ficon-cog" > < / i > Settings< / a >
< a class = "btn btn-small btn-info" href = "#" > < i class = "ficon-info-sign" > < / i > More Info< / a >
2012-03-09 13:02:49 +08:00
< / p >
< div class = "well" style = "padding: 8px 0;" >
< ul class = "nav nav-list" >
2012-05-21 21:06:58 +08:00
< li class = "active" > < a href = "#" > < i class = "ficon-home" > < / i > Home< / a > < / li >
< li > < a href = "#" > < i class = "ficon-book" > < / i > Library< / a > < / li >
< li > < a href = "#" > < i class = "ficon-pencil" > < / i > Applications< / a > < / li >
< li > < a href = "#" > < i class = "ficon-cogs" > < / i > Settings< / a > < / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / div >
< / div >
< div class = "span4" >
< div class = "btn-toolbar" >
< div class = "btn-group" >
2012-05-21 21:06:58 +08:00
< a class = "btn" href = "#" > < i class = "ficon-align-left" > < / i > < / a >
< a class = "btn" href = "#" > < i class = "ficon-align-center" > < / i > < / a >
< a class = "btn" href = "#" > < i class = "ficon-align-right" > < / i > < / a >
< a class = "btn" href = "#" > < i class = "ficon-align-justify" > < / i > < / a >
2012-03-09 13:02:49 +08:00
< / div >
< div class = "btn-group" >
2012-05-21 21:06:58 +08:00
< a class = "btn btn-primary" href = "#" > < i class = "ficon-user" > < / i > User< / a >
< a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" > < span class = "ficon-caret-down" > < / span > < / a >
2012-03-09 13:02:49 +08:00
< ul class = "dropdown-menu" >
2012-05-21 21:06:58 +08:00
< li > < a href = "#" > < i class = "ficon-pencil" > < / i > Edit< / a > < / li >
< li > < a href = "#" > < i class = "ficon-trash" > < / i > Delete< / a > < / li >
< li > < a href = "#" > < i class = "ficon-ban-circle" > < / i > Ban< / a > < / li >
2012-03-09 13:02:49 +08:00
< 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" >
2012-05-21 21:06:58 +08:00
< span class = "add-on" > < i class = "ficon-envelope" > < / i > < / span >
2012-03-09 13:02:49 +08:00
< input class = "span2" id = "inputIcon" type = "text" placeholder = "Email address" >
< / div >
< / div >
< / div >
< div class = "control-group" >
< div class = "controls" >
< div class = "input-prepend" >
2012-05-21 21:06:58 +08:00
< span class = "add-on" > < i class = "ficon-key" > < / i > < / span >
2012-03-09 13:02:49 +08:00
< 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;" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-camera-retro" > < / i > ficon-camera-retro
2012-03-09 13:02:49 +08:00
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div style="font-size: 24px;">
2012-05-21 21:06:58 +08:00
< i class="ficon-camera-retro"> < /i> ficon-camera-retro
2012-03-09 13:02:49 +08:00
< /div>
< / pre >
2012-05-21 21:06:58 +08:00
< div class = "alert alert-info" > < i class = "ficon-info-sign" > < / i > Icon classes are echoed via CSS :before.< / div >
< p > Increase the icon size by using the < code > ficon-large< / code > class. This increases the size by 33% relative to the font-size of the container.< / p >
2012-03-09 13:02:49 +08:00
< div class = "well" >
< div style = "font-size: 24px;" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-camera-retro ficon-large" > < / i > ficon-camera-retro
2012-03-09 13:02:49 +08:00
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div style="font-size: 24px;">
2012-05-21 21:06:58 +08:00
< i class="ficon-camera-retro ficon-large"> < /i> ficon-camera-retro
2012-03-09 13:02:49 +08:00
< /div>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Buttons< / h3 >
< p >
< p >
< a class = "btn" href = "#" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-refresh" > < / i > Refresh< / a >
2012-03-09 13:02:49 +08:00
< a class = "btn btn-success" href = "#" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-shopping-cart ficon-large" > < / i > Checkout< / a >
2012-03-09 13:02:49 +08:00
< / p >
< p >
< a class = "btn btn-large btn-primary" href = "#" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-comment" > < / i > Comment< / a >
2012-03-09 13:02:49 +08:00
< a class = "btn btn-danger" href = "#" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-trash ficon-large" > < / i > Delete< / a >
2012-03-09 13:02:49 +08:00
< / p >
< p >
< a class = "btn btn-small" href = "#" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-cog" > < / i > Settings< / a >
2012-03-09 13:02:49 +08:00
< a class = "btn btn-small btn-info" href = "#" >
2012-05-21 21:06:58 +08:00
< i class = "ficon-info-sign" > < / i > More Info< / a >
2012-03-09 13:02:49 +08:00
< / p >
< / p >
< / div >
< div class = "span9" >
< p > Font Awesome icons work great in buttons.< / p >
< pre class = "prettyprint linenums" >
< a class="btn" href="#">
2012-05-21 21:06:58 +08:00
< i class="ficon-refresh"> < /i> Refresh< /a>
2012-03-09 13:02:49 +08:00
< a class="btn btn-success" href="#">
2012-05-21 21:06:58 +08:00
< i class="ficon-shopping-cart ficon-large"> < /i> Checkout< /a>
2012-03-09 13:02:49 +08:00
< a class="btn btn-large btn-primary" href="#">
2012-05-21 21:06:58 +08:00
< i class="ficon-comment"> < /i> Comment< /a>
2012-03-09 13:02:49 +08:00
< a class="btn btn-danger" href="#">
2012-05-21 21:06:58 +08:00
< i class="ficon-trash ficon-large"> < /i> Delete< /a>
2012-03-09 13:02:49 +08:00
< a class="btn btn-small" href="#">
2012-05-21 21:06:58 +08:00
< i class="ficon-cog"> < /i> Settings< /a>
2012-03-09 13:02:49 +08:00
< a class="btn btn-small btn-info" href="#">
2012-05-21 21:06:58 +08:00
< i class="ficon-info-sign"> < /i> More Info< /a>
2012-03-09 13:02:49 +08:00
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Button groups< / h3 >
< p >
< div class = "btn-group" >
2012-05-21 21:06:58 +08:00
< a class = "btn" href = "#" > < i class = "ficon-align-left" > < / i > < / a >
< a class = "btn" href = "#" > < i class = "ficon-align-center" > < / i > < / a >
< a class = "btn" href = "#" > < i class = "ficon-align-right" > < / i > < / a >
< a class = "btn" href = "#" > < i class = "ficon-align-justify" > < / i > < / a >
2012-03-09 13:02:49 +08:00
< / div >
< / p >
< / div >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< div class="btn-group">
2012-05-21 21:06:58 +08:00
< a class="btn" href="#"> < i class="ficon-align-left"> < /i> < /a>
< a class="btn" href="#"> < i class="ficon-align-center"> < /i> < /a>
< a class="btn" href="#"> < i class="ficon-align-right"> < /i> < /a>
< a class="btn" href="#"> < i class="ficon-align-justify"> < /i> < /a>
2012-03-09 13:02:49 +08:00
< /div>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Button dropdowns< / h3 >
< p >
< div class = "btn-group" >
2012-05-21 21:06:58 +08:00
< a class = "btn btn-primary" href = "#" > < i class = "ficon-user" > < / i > User< / a >
2012-03-09 13:02:49 +08:00
< a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" >
2012-05-21 21:06:58 +08:00
< span class = "ficon-caret-down" > < / span > < / a >
2012-03-09 13:02:49 +08:00
< ul class = "dropdown-menu" >
2012-05-21 21:06:58 +08:00
< li > < a href = "#" > < i class = "ficon-pencil" > < / i > Edit< / a > < / li >
< li > < a href = "#" > < i class = "ficon-trash" > < / i > Delete< / a > < / li >
< li > < a href = "#" > < i class = "ficon-ban-circle" > < / i > Ban< / a > < / li >
2012-03-09 13:02:49 +08:00
< 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">
2012-05-21 21:06:58 +08:00
< a class="btn btn-primary" href="#"> < i class="ficon-user"> < /i> User< /a>
< a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> < span class="ficon-caret-down"> < /span> < /a>
2012-03-09 13:02:49 +08:00
< ul class="dropdown-menu">
2012-05-21 21:06:58 +08:00
< li> < a href="#"> < i class="ficon-pencil"> < /i> Edit< /a> < /li>
< li> < a href="#"> < i class="ficon-trash"> < /i> Delete< /a> < /li>
< li> < a href="#"> < i class="ficon-ban-circle"> < /i> Ban< /a> < /li>
2012-03-09 13:02:49 +08:00
< li class="divider"> < /li>
< li> < a href="#"> < i class="i"> < /i> Make admin< /a> < /li>
< /ul>
< /div>
< / pre >
2012-05-21 21:06:58 +08:00
< div class = "alert alert-info" > < i class = "ficon-info-sign" > < / i > Don't forget to add the appropriate JavaScript to enable button dropdowns.< / div >
2012-03-09 13:02:49 +08:00
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Lists< / h3 >
< p >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-ok" > < / i > Lists< / li >
< li > < i class = "ficon-ok" > < / i > Buttons< / li >
< li > < i class = "ficon-ok" > < / i > Button groups< / li >
< li > < i class = "ficon-ok" > < / i > Navigation< / li >
< li > < i class = "ficon-ok" > < / i > Prepended form inputs< / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / p >
< / div >
< div class = "span9" >
< p > Easily replace individual bullets.< / p >
< pre class = "prettyprint linenums" >
< ul>
2012-05-21 21:06:58 +08:00
< li class="ficon-ok"> Lists< /li>
< li class="ficon-ok"> Buttons< /li>
< li class="ficon-ok"> Button groups< /li>
< li class="ficon-ok"> Navigation< /li>
< li class="ficon-ok"> Prepended form inputs< /li>
2012-03-09 13:02:49 +08:00
< /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" >
2012-05-21 21:06:58 +08:00
< li class = "active" > < a href = "#" > < i class = "ficon-home" > < / i > Home< / a > < / li >
< li > < a href = "#" > < i class = "ficon-book" > < / i > Library< / a > < / li >
< li > < a href = "#" > < i class = "ficon-pencil" > < / i > Applications< / a > < / li >
< li > < a href = "#" > < i class = "ficon-cogs" > < / i > Settings< / a > < / li >
2012-03-09 13:02:49 +08:00
< / 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">
2012-05-21 21:06:58 +08:00
< li class="active"> < a href="#"> < i class="ficon-home"> < /i> Home< /a> < /li>
< li> < a href="#"> < i class="ficon-book"> < /i> Library< /a> < /li>
< li> < a href="#"> < i class="ficon-pencil"> < /i> Applications< /a> < /li>
< li> < a href="#"> < i class="ficon-cogs"> < /i> Settings< /a> < /li>
2012-03-09 13:02:49 +08:00
< /ul>
< / pre >
< / div >
< / div >
< div class = "row" >
< div class = "span3" >
< h3 > Prepended form inputs< / h3 >
< p >
< form >
< div class = "input-prepend" >
2012-05-21 21:06:58 +08:00
< span class = "add-on" > < i class = "ficon-envelope" > < / i > < / span >
2012-03-09 13:02:49 +08:00
< input class = "span2" type = "text" placeholder = "Email address" >
< / div >
< div class = "input-prepend" >
2012-05-21 21:06:58 +08:00
< span class = "add-on" > < i class = "ficon-key" > < / i > < / span >
2012-03-09 13:02:49 +08:00
< input class = "span2" type = "password" placeholder = "Password" >
< / div >
< / form >
< / p >
< / div >
< div class = "span9" >
< pre class = "prettyprint linenums" >
< form>
< div class="input-prepend">
2012-05-21 21:06:58 +08:00
< span class="add-on"> < i class="ficon-envelope"> < /i> < /span>
2012-03-09 13:02:49 +08:00
< input class="span2" type="text" placeholder="Email address">
< /div>
< div class="input-prepend">
2012-05-21 21:06:58 +08:00
< span class="add-on"> < i class="ficon-key"> < /i> < /span>
2012-03-09 13:02:49 +08:00
< 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 >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-plus" > < / i > Support for IE7.< / li >
< li > < i class = "ficon-plus" > < / i > Better hinting for smaller font sizes.< / li >
< li > < i class = "ficon-plus" > < / i > 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 > < i class = "ficon-plus" > < / i > More complete Twitter Bootstrap compatibility.< / li >
< li > < i class = "ficon-plus" > < / i > Tricks and tips for super-awesome creative CSS methods, like the star example above.< / li >
2012-03-09 13:02:49 +08:00
< / ul >
< / section >
< footer >
< div class = "row" >
< div class = "span4" >
< h2 > Contact< / h2 >
2012-05-21 21:06:58 +08:00
< ul class = "ficons" >
< li > < i class = "ficon-envelope" > < / i > Email: < a href = "mailto:dave@davegandy.com" > Dave Gandy< / a > < / li >
< li > < i class = "ficon-twitter" > < / i > Twitter: < a href = "http://twitter.com/fortaweso_me/" target = "_blank" > @FortAweso_me< / a > < / li >
< li > < i class = "ficon-wrench" > < / i > Work: < a href = "http://kyruus.com" target = "_blank" > Kyruus< / a > Lead Product Designer< / li >
2012-03-09 13:02:49 +08: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 >
2012-05-21 21:06:58 +08:00
< / div >
< div >
< 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.
2012-03-09 13:02:49 +08:00
< / div >
< / footer >
< / div >
< script type = "text/template" id = "modal-template" >
< div class = "modal hide fade in" >
< div class = "modal-header" >
2012-05-21 21:06:58 +08:00
< a class = "close" data-dismiss = "modal" > < i class = "ficon-remove" > < / i > < / a >
2012-03-09 13:02:49 +08:00
< 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 >
