napidocs

<!DOCTYPE html>     <html lang="en" xmlns="http://www.w3.org/1999/html">  <head>  <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="">    <link rel="stylesheet" href="assets/css/site.css"> <link rel="stylesheet" href="assets/css/prettify.css"> <link rel="stylesheet" href="assets/css/font-awesome.css">   <link rel="shortcut icon" href="assets/ico/favicon.ico"> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-30136587-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body data-spy="scroll" data-target=".navbar"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#"><i class="icon-flag"></i> Font Awesome</a> <ul class="nav"> <li><a href="#whats-new">What's New</a></li> <li class="dropdown"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Icons <i class="icon-caret-down"></i> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#icons-new">New Icons</a></li> <li class="divider"></li> <li class="nav-header">All Icons</li> <li><a href="#icons-web-app"><i class="icon-edit"></i> Web Application</a></li> <li><a href="#icons-text-editor"><i class="icon-save"></i> Text Editor</a></li> <li><a href="#icons-directional"><i class="icon-hand-right"></i> Directional</a></li> <li><a href="#icons-video-player"><i class="icon-play"></i> Video Player</a></li> <li><a href="#icons-social"><i class="icon-github"></i> Social</a></li> <li><a href="#icons-medical"><i class="icon-stethoscope"></i> Medical</a></li> </ul> </li> <li><a href="#integration">Integration</a></li> <li><a href="#examples">Examples</a></li> <li><a href="#contribute">Contribute</a></li> <li><a href="#roadmap">Roadmap</a></li> <li><a href="#license">License</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="jumbotron"> <div class="container"> <div class="row"> <div class="span8"> <div class="hero-content"> <h1>Font Awesome</h1> <p>The iconic font designed for<br>use with Twitter Bootstrap</p> <div class="actions"> <a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> <i class="icon-download icon-2x pull-left"></i> Download Font<br>Awesome 3.0</a> <a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);"> <i class="icon-github icon-2x pull-left"></i> View Project<br>on GitHub</a> </div> <div class="shameless-self-promotion"> Version 3.0.2 • Created & Maintained by Dave Gandy </div> </div> </div> <div class="span4"> <div id="iconCarousel" class="carousel slide">  <div class="carousel-inner"> <div class="active item"><div><i class="icon-flag"></i></div></div> <div class="item"><div><i class="icon-cloud-download"></i></div></div> <div class="item"><div><i class="icon-lightbulb"></i></div></div> <div class="item"><div><i class="icon-group"></i></div></div> <div class="item"><div><i class="icon-ambulance"></i></div></div> <div class="item"><div><i class="icon-star-empty"></i></div></div> <div class="item"><div><i class="icon-envelope"></i></div></div> <div class="item"><div><i class="icon-coffee"></i></div></div> <div class="item"><div><i class="icon-medkit"></i></div></div> <div class="item"><div><i class="icon-book"></i></div></div> <div class="item"><div><i class="icon-fighter-jet"></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-beer"></i></div></div> <div class="item"><div><i class="icon-quote-left"></i></div></div> <div class="item"><div><i class="icon-stethoscope"></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>  <a class="carousel-control left" href="#iconCarousel" data-slide="prev" onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> <i class="icon-arrow-left"></i></a> <a class="carousel-control right" href="#iconCarousel" data-slide="next" onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> <i class="icon-arrow-right"></i></a> </div> </div> </div> </div> </div> <div id="social-buttons"> <div class="container"> <span class="watch"> <a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Watch</a> <a id="watchers" class="count btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome">9000+</a> </span> <span class="fork"> <a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Fork</a> <a id="forks" class="count btn btn-mini" href="#">800+</a> </span> <span class="follow"> <a class="btn btn-mini" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter icon-large"></i> Follow @fortaweso_me</a> <span id="followers" class="count btn btn-mini">2500+</span> </span> </div> </div> <div class="container"> <section id="why" class="clearfix"> <div class="row"> <div class="span4"> <h4><i class="icon-flag"></i> One font, 249 icons</h4> In a single collection, Font Awesome is a pictographic language of web-related actions. </div> <div class="span4"> <h4><i class="icon-pencil"></i> CSS control</h4> Easily style icon color, size, shadow, and anything that's possible with CSS. </div> <div class="span4"> <h4><i class="icon-fullscreen"></i> Infinite scalability</h4> Scalable vector graphics means every icon looks awesome at any size. </div> </div> <div class="row"> <div class="span4"> <h4><i class="icon-beer"></i> Free, as in Beer</h4> Font Awesome is completely free for commercial use. Check out the <a href="#license">license</a>. </div> <div class="span4"> <h4><i class="icon-ok"></i> IE7 Support</h4> Font Awesome supports IE7. If you need it, you have my condolences. </div> <div class="span4"> <h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4> Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. </div> </div> <div class="row"> <div class="span4"> <h4><i class="icon-thumbs-up"></i> Made for Twitter Bootstrap</h4> Designed from scratch to be fully compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.2.2</a>. </div> <div class="span4"> <h4><i class="icon-tint"></i> Designer Friendly</h4> Install FontAwesome.otf and <a href="design.html" target="_blank">visit the copy & paste page</a>. Happy designing. </div> <div class="span4"> <h4><i class="icon-search"></i> Screen reader compatible</h4> Font Awesome won't trip up screen readers, unlike other icon fonts. </div> </div> </section> <section id="whats-new"> <h2 class="page-header">What's new in Font Awesome 3.0</h2> <div class="row"> <div class="span4"> <h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4> Every single icon re-created from the ground up to be optimized for Bootstrap's default 14px. </div> <div class="span4"> <h4><i class="icon-th-large"></i> <a target="_blank" href="http://icnfnt.com/">Font Sub-setting</a></h4> Thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a target="_blank" href="http://icnfnt.com/">subset</a> to get just the icons you need. </div> <div class="span4"> <h4><i class="icon-legal"></i> <a href="#license">Better License</a></h4> SIL open font license, MIT license for code. No more attribution required, but much appreciated. </div> </div> <div class="row"> <div class="span4"> <h4><i class="icon-lightbulb"></i> 40 New Icons in 3.0</h4> Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>. </div> <div class="span4"> <h4><i class="icon-spinner icon-spin"></i> <a href="#examples">New Styles</a></h4> <a href="#examples">New styles</a> for animated spinning icons, icons with 2x-4x size multipliers, icon borders, & more. </div> <div class="span4"> <h4><i class="icon-resize-small"></i> 28% Smaller Payload</h4> 3.0 is smaller, even with 16% more icons. Crazy small if you <a target="_blank" href="http://icnfnt.com/">subset</a> just the icons you need. </div> </div> </section> <section id="icons-new" class="row"> <div class="span12"> <h2 class="page-header">New Icons in 3.0</h2> <p> You asked, Font Awesome delivers with 40 shiny new icons in version 3.0. New icons can be requested on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>. Or even better, you can <a href="#contribute">contribute your own icons</a>. </p> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-cloud-download"></i> icon-cloud-download</li> <li><i class="icon-cloud-upload"></i> icon-cloud-upload</li> <li><i class="icon-lightbulb"></i> icon-lightbulb</li> <li><i class="icon-exchange"></i> icon-exchange</li> <li><i class="icon-bell-alt"></i> icon-bell-alt</li> <li><i class="icon-file-alt"></i> icon-file-alt</li> <li><i class="icon-beer"></i> icon-beer</li> <li><i class="icon-coffee"></i> icon-coffee</li> <li><i class="icon-food"></i> icon-food</li> <li><i class="icon-fighter-jet"></i> icon-fighter-jet</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-user-md"></i> icon-user-md</li> <li><i class="icon-stethoscope"></i> icon-stethoscope</li> <li><i class="icon-suitcase"></i> icon-suitcase</li> <li><i class="icon-building"></i> icon-building</li> <li><i class="icon-hospital"></i> icon-hospital</li> <li><i class="icon-ambulance"></i> icon-ambulance</li> <li><i class="icon-medkit"></i> icon-medkit</li> <li><i class="icon-h-sign"></i> icon-h-sign</li> <li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li> <li><i class="icon-spinner"></i> icon-spinner</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-angle-left"></i> icon-angle-left</li> <li><i class="icon-angle-right"></i> icon-angle-right</li> <li><i class="icon-angle-up"></i> icon-angle-up</li> <li><i class="icon-angle-down"></i> icon-angle-down</li> <li><i class="icon-double-angle-left"></i> icon-double-angle-left</li> <li><i class="icon-double-angle-right"></i> icon-double-angle-right</li> <li><i class="icon-double-angle-up"></i> icon-double-angle-up</li> <li><i class="icon-double-angle-down"></i> icon-double-angle-down</li> <li><i class="icon-circle-blank"></i> icon-circle-blank</li> <li><i class="icon-circle"></i> icon-circle</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-desktop"></i> icon-desktop</li> <li><i class="icon-laptop"></i> icon-laptop</li> <li><i class="icon-tablet"></i> icon-tablet</li> <li><i class="icon-mobile-phone"></i> icon-mobile-phone</li> <li><i class="icon-quote-left"></i> icon-quote-left</li> <li><i class="icon-quote-right"></i> icon-quote-right</li> <li><i class="icon-reply"></i> icon-reply</li> <li><i class="icon-github-alt"></i> icon-github-alt</li> <li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li> <li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li> </ul> </div> </section> <section id="icons-web-app" class="row"> <div class="span12"> <h2 class="page-header">Web Application Icons</h2> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-adjust"></i> icon-adjust</li> <li><i class="icon-asterisk"></i> icon-asterisk</li> <li><i class="icon-ban-circle"></i> icon-ban-circle</li> <li><i class="icon-bar-chart"></i> icon-bar-chart</li> <li><i class="icon-barcode"></i> icon-barcode</li> <li><i class="icon-beaker"></i> icon-beaker</li> <li><i class="icon-beer"></i> icon-beer</li> <li><i class="icon-bell"></i> icon-bell</li> <li><i class="icon-bell-alt"></i> icon-bell-alt</li> <li><i class="icon-bolt"></i> icon-bolt</li> <li><i class="icon-book"></i> icon-book</li> <li><i class="icon-bookmark"></i> icon-bookmark</li> <li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li> <li><i class="icon-briefcase"></i> icon-briefcase</li> <li><i class="icon-bullhorn"></i> icon-bullhorn</li> <li><i class="icon-calendar"></i> icon-calendar</li> <li><i class="icon-camera"></i> icon-camera</li> <li><i class="icon-camera-retro"></i> icon-camera-retro</li> <li><i class="icon-certificate"></i> icon-certificate</li> <li><i class="icon-check"></i> icon-check</li> <li><i class="icon-check-empty"></i> icon-check-empty</li> <li><i class="icon-circle"></i> icon-circle</li> <li><i class="icon-circle-blank"></i> icon-circle-blank</li> <li><i class="icon-cloud"></i> icon-cloud</li> <li><i class="icon-cloud-download"></i> icon-cloud-download</li> <li><i class="icon-cloud-upload"></i> icon-cloud-upload</li> <li><i class="icon-coffee"></i> icon-coffee</li> <li><i class="icon-cog"></i> icon-cog</li> <li><i class="icon-cogs"></i> icon-cogs</li> <li><i class="icon-comment"></i> icon-comment</li> <li><i class="icon-comment-alt"></i> icon-comment-alt</li> <li><i class="icon-comments"></i> icon-comments</li> <li><i class="icon-comments-alt"></i> icon-comments-alt</li> <li><i class="icon-credit-card"></i> icon-credit-card</li> <li><i class="icon-dashboard"></i> icon-dashboard</li> <li><i class="icon-desktop"></i> icon-desktop</li> <li><i class="icon-download"></i> icon-download</li> <li><i class="icon-download-alt"></i> icon-download-alt</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-edit"></i> icon-edit</li> <li><i class="icon-envelope"></i> icon-envelope</li> <li><i class="icon-envelope-alt"></i> icon-envelope-alt</li> <li><i class="icon-exchange"></i> icon-exchange</li> <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li> <li><i class="icon-external-link"></i> icon-external-link</li> <li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-eye-open"></i> icon-eye-open</li> <li><i class="icon-facetime-video"></i> icon-facetime-video</li> <li><i class="icon-fighter-jet"></i> icon-fighter-jet</li> <li><i class="icon-film"></i> icon-film</li> <li><i class="icon-filter"></i> icon-filter</li> <li><i class="icon-fire"></i> icon-fire</li> <li><i class="icon-flag"></i> icon-flag</li> <li><i class="icon-folder-close"></i> icon-folder-close</li> <li><i class="icon-folder-open"></i> icon-folder-open</li> <li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li> <li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li> <li><i class="icon-food"></i> icon-food</li> <li><i class="icon-gift"></i> icon-gift</li> <li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-globe"></i> icon-globe</li> <li><i class="icon-group"></i> icon-group</li> <li><i class="icon-hdd"></i> icon-hdd</li> <li><i class="icon-headphones"></i> icon-headphones</li> <li><i class="icon-heart"></i> icon-heart</li> <li><i class="icon-heart-empty"></i> icon-heart-empty</li> <li><i class="icon-home"></i> icon-home</li> <li><i class="icon-inbox"></i> icon-inbox</li> <li><i class="icon-info-sign"></i> icon-info-sign</li> <li><i class="icon-key"></i> icon-key</li> <li><i class="icon-leaf"></i> icon-leaf</li> <li><i class="icon-laptop"></i> icon-laptop</li> <li><i class="icon-legal"></i> icon-legal</li> <li><i class="icon-lemon"></i> icon-lemon</li> <li><i class="icon-lightbulb"></i> icon-lightbulb</li> <li><i class="icon-lock"></i> icon-lock</li> <li><i class="icon-unlock"></i> icon-unlock</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-magic"></i> icon-magic</li> <li><i class="icon-magnet"></i> icon-magnet</li> <li><i class="icon-map-marker"></i> icon-map-marker</li> <li><i class="icon-minus"></i> icon-minus</li> <li><i class="icon-minus-sign"></i> icon-minus-sign</li> <li><i class="icon-mobile-phone"></i> icon-mobile-phone</li> <li><i class="icon-money"></i> icon-money</li> <li><i class="icon-move"></i> icon-move</li> <li><i class="icon-music"></i> icon-music</li> <li><i class="icon-off"></i> icon-off</li> <li><i class="icon-ok"></i> icon-ok</li> <li><i class="icon-ok-circle"></i> icon-ok-circle</li> <li><i class="icon-ok-sign"></i> icon-ok-sign</li> <li><i class="icon-pencil"></i> icon-pencil</li> <li><i class="icon-picture"></i> icon-picture</li> <li><i class="icon-plane"></i> icon-plane</li> <li><i class="icon-plus"></i> icon-plus</li> <li><i class="icon-plus-sign"></i> icon-plus-sign</li> <li><i class="icon-print"></i> icon-print</li> <li><i class="icon-pushpin"></i> icon-pushpin</li> <li><i class="icon-qrcode"></i> icon-qrcode</li> <li><i class="icon-question-sign"></i> icon-question-sign</li> <li><i class="icon-quote-left"></i> icon-quote-left</li> <li><i class="icon-quote-right"></i> icon-quote-right</li> <li><i class="icon-random"></i> icon-random</li> <li><i class="icon-refresh"></i> icon-refresh</li> <li><i class="icon-remove"></i> icon-remove</li> <li><i class="icon-remove-circle"></i> icon-remove-circle</li> <li><i class="icon-remove-sign"></i> icon-remove-sign</li> <li><i class="icon-reorder"></i> icon-reorder</li> <li><i class="icon-reply"></i> icon-reply</li> <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li> <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li> <li><i class="icon-retweet"></i> icon-retweet</li> <li><i class="icon-road"></i> icon-road</li> <li><i class="icon-rss"></i> icon-rss</li> <li><i class="icon-screenshot"></i> icon-screenshot</li> <li><i class="icon-search"></i> icon-search</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-share"></i> icon-share</li> <li><i class="icon-share-alt"></i> icon-share-alt</li> <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li> <li><i class="icon-signal"></i> icon-signal</li> <li><i class="icon-signin"></i> icon-signin</li> <li><i class="icon-signout"></i> icon-signout</li> <li><i class="icon-sitemap"></i> icon-sitemap</li> <li><i class="icon-sort"></i> icon-sort</li> <li><i class="icon-sort-down"></i> icon-sort-down</li> <li><i class="icon-sort-up"></i> icon-sort-up</li> <li><i class="icon-spinner"></i> icon-spinner</li> <li><i class="icon-star"></i> icon-star</li> <li><i class="icon-star-empty"></i> icon-star-empty</li> <li><i class="icon-star-half"></i> icon-star-half</li> <li><i class="icon-tablet"></i> icon-tablet</li> <li><i class="icon-tag"></i> icon-tag</li> <li><i class="icon-tags"></i> icon-tags</li> <li><i class="icon-tasks"></i> icon-tasks</li> <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li> <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li> <li><i class="icon-time"></i> icon-time</li> <li><i class="icon-tint"></i> icon-tint</li> <li><i class="icon-trash"></i> icon-trash</li> <li><i class="icon-trophy"></i> icon-trophy</li> <li><i class="icon-truck"></i> icon-truck</li> <li><i class="icon-umbrella"></i> icon-umbrella</li> <li><i class="icon-upload"></i> icon-upload</li> <li><i class="icon-upload-alt"></i> icon-upload-alt</li> <li><i class="icon-user"></i> icon-user</li> <li><i class="icon-user-md"></i> icon-user-md</li> <li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-up"></i> icon-volume-up</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-wrench"></i> icon-wrench</li> <li><i class="icon-zoom-in"></i> icon-zoom-in</li> <li><i class="icon-zoom-out"></i> icon-zoom-out</li> </ul> </div> </section> <section id="icons-text-editor" class="row"> <div class="span12"> <h2 class="page-header">Text Editor Icons</h2> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-file"></i> icon-file</li> <li><i class="icon-file-alt"></i> icon-file-alt</li> <li><i class="icon-cut"></i> icon-cut</li> <li><i class="icon-copy"></i> icon-copy</li> <li><i class="icon-paste"></i> icon-paste</li> <li><i class="icon-save"></i> icon-save</li> <li><i class="icon-undo"></i> icon-undo</li> <li><i class="icon-repeat"></i> icon-repeat</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-text-height"></i> icon-text-height</li> <li><i class="icon-text-width"></i> icon-text-width</li> <li><i class="icon-align-left"></i> icon-align-left</li> <li><i class="icon-align-center"></i> icon-align-center</li> <li><i class="icon-align-right"></i> icon-align-right</li> <li><i class="icon-align-justify"></i> icon-align-justify</li> <li><i class="icon-indent-left"></i> icon-indent-left</li> <li><i class="icon-indent-right"></i> icon-indent-right</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-font"></i> icon-font</li> <li><i class="icon-bold"></i> icon-bold</li> <li><i class="icon-italic"></i> icon-italic</li> <li><i class="icon-strikethrough"></i> icon-strikethrough</li> <li><i class="icon-underline"></i> icon-underline</li> <li><i class="icon-link"></i> icon-link</li> <li><i class="icon-paper-clip"></i> icon-paper-clip</li> <li><i class="icon-columns"></i> icon-columns</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-table"></i> icon-table</li> <li><i class="icon-th-large"></i> icon-th-large</li> <li><i class="icon-th"></i> icon-th</li> <li><i class="icon-th-list"></i> icon-th-list</li> <li><i class="icon-list"></i> icon-list</li> <li><i class="icon-list-ol"></i> icon-list-ol</li> <li><i class="icon-list-ul"></i> icon-list-ul</li> <li><i class="icon-list-alt"></i> icon-list-alt</li> </ul> </div> </section> <section id="icons-directional" class="row"> <div class="span12"> <h2 class="page-header">Directional Icons</h2> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-angle-left"></i> icon-angle-left</li> <li><i class="icon-angle-right"></i> icon-angle-right</li> <li><i class="icon-angle-up"></i> icon-angle-up</li> <li><i class="icon-angle-down"></i> icon-angle-down</li> <li><i class="icon-arrow-down"></i> icon-arrow-down</li> <li><i class="icon-arrow-left"></i> icon-arrow-left</li> <li><i class="icon-arrow-right"></i> icon-arrow-right</li> <li><i class="icon-arrow-up"></i> icon-arrow-up</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-caret-down"></i> icon-caret-down</li> <li><i class="icon-caret-left"></i> icon-caret-left</li> <li><i class="icon-caret-right"></i> icon-caret-right</li> <li><i class="icon-caret-up"></i> icon-caret-up</li> <li><i class="icon-chevron-down"></i> icon-chevron-down</li> <li><i class="icon-chevron-left"></i> icon-chevron-left</li> <li><i class="icon-chevron-right"></i> icon-chevron-right</li> <li><i class="icon-chevron-up"></i> icon-chevron-up</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li> <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li> <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li> <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li> <li><i class="icon-double-angle-left"></i> icon-double-angle-left</li> <li><i class="icon-double-angle-right"></i> icon-double-angle-right</li> <li><i class="icon-double-angle-up"></i> icon-double-angle-up</li> <li><i class="icon-double-angle-down"></i> icon-double-angle-down</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-hand-down"></i> icon-hand-down</li> <li><i class="icon-hand-left"></i> icon-hand-left</li> <li><i class="icon-hand-right"></i> icon-hand-right</li> <li><i class="icon-hand-up"></i> icon-hand-up</li> <li><i class="icon-circle"></i> icon-circle</li> <li><i class="icon-circle-blank"></i> icon-circle-blank</li> </ul> </div> </section> <section id="icons-video-player" class="row"> <div class="span12"> <h2 class="page-header">Video Player Icons</h2> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-play-circle"></i> icon-play-circle</li> <li><i class="icon-play"></i> icon-play</li> <li><i class="icon-pause"></i> icon-pause</li> <li><i class="icon-stop"></i> icon-stop</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-step-backward"></i> icon-step-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li> <li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-forward"></i> icon-forward</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-fast-forward"></i> icon-fast-forward</li> <li><i class="icon-step-forward"></i> icon-step-forward</li> <li><i class="icon-eject"></i> icon-eject</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-fullscreen"></i> icon-fullscreen</li> <li><i class="icon-resize-full"></i> icon-resize-full</li> <li><i class="icon-resize-small"></i> icon-resize-small</li> </ul> </div> </section> <section id="icons-social" class="row"> <div class="span12"> <h2 class="page-header">Social Icons</h2> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-phone"></i> icon-phone</li> <li><i class="icon-phone-sign"></i> icon-phone-sign</li> <li><i class="icon-facebook"></i> icon-facebook</li> <li><i class="icon-facebook-sign"></i> icon-facebook-sign</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-twitter"></i> icon-twitter</li> <li><i class="icon-twitter-sign"></i> icon-twitter-sign</li> <li><i class="icon-github"></i> icon-github</li> <li><i class="icon-github-alt"></i> icon-github-alt</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-github-sign"></i> icon-github-sign</li> <li><i class="icon-linkedin"></i> icon-linkedin</li> <li><i class="icon-linkedin-sign"></i> icon-linkedin-sign</li> <li><i class="icon-pinterest"></i> icon-pinterest</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-pinterest-sign"></i> icon-pinterest-sign</li> <li><i class="icon-google-plus"></i> icon-google-plus</li> <li><i class="icon-google-plus-sign"></i> icon-google-plus-sign</li> <li><i class="icon-sign-blank"></i> icon-sign-blank</li> </ul> </div> </section> <section id="icons-medical" class="row"> <div class="span12"> <h2 class="page-header">Medical Icons <small>Want to change healthcare? Work with me at <a href="#kyruus">Kyruus</a>.</small></h2> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-ambulance"></i> icon-ambulance</li> <li><i class="icon-beaker"></i> icon-beaker</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-h-sign"></i> icon-h-sign</li> <li><i class="icon-hospital"></i> icon-hospital</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-medkit"></i> icon-medkit</li> <li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li> </ul> </div> <div class="span3"> <ul class="the-icons"> <li><i class="icon-stethoscope"></i> icon-stethoscope</li> <li><i class="icon-user-md"></i> icon-user-md</li> </ul> </div> </section> <section id="integration"> <h2 class="page-header">Integration</h2> <p>It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.</p> <div class="row"> <div class="span12"> <h4>Easy Bootstrap + Font Awesome Integration</h4> </div> <div class="span3"> <p>Use this method to integrate Font Awesome with the default Bootstrap CSS.</p> </div> <div class="span9"> <ol> <li>Copy the Font Awesome font directory into your project.</li> <li>Copy font-awesome.min.css into your project.</li> <li> Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place. <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your CSS directory.</p> </li> <li> In the <code><head></code> of your html, reference the location to your font-awesome.min.css. <pre class="prettyprint linenums"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </pre> </li> <li>Check out the examples to start using Font Awesome!</li> </ol> </div> </div> <div class="row"> <div class="span12"> <h4>Custom Bootstrap + Font Awesome Integration using LESS</h4> </div> <div class="span3"> <p>Use this method to integrate Font Awesome 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 <code>@FontAwesomePath</code> variable to point to your font directory. <pre class="prettyprint linenums"> @FontAwesomePath: "../font"; </pre> <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p> </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="span12"> <h4>Custom Bootstrap + Font Awesome Integration using SASS or SCSS</h4> <p>I have never used either, so let me know if the included SCSS or SASS files have issues.</p> </div> </div> <div class="row"> <div class="span12"> <h4>Not using Bootstrap?</h4> </div> <div class="span3"> <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.min.css into your project.</li> <li>Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).</li> <li>Check out the examples to start using Font Awesome!</li> </ol> </div> </div> <div class="row"> <div class="span12"> <h4>Need IE7 Support?</h4> </div> <div class="span3"> <p>Font Awesome supports IE7. If you need it, you have my condolences.</p> </div> <div class="span9"> <ol> <li>Get Font Awesome working properly in a modern browser.</li> <li>Copy font-awesome-ie7.min.css into your project.</li> <li> In the <code><head></code> of your html, reference the location to your font-awesome-ie7.min.css. <pre class="prettyprint linenums"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/font-awesome.min.css">  </pre> </li> <li>Go complain to whoever decided your project needs IE7 support.</li> </ol> </div> </div> </section> <section id="examples"> <h2 class="page-header">Examples</h2> <p>Many examples re-used from the Twitter Bootstrap documentation.</p> <div class="row"> <div class="span4"> <div class="well well-transparent"> <p>Use Font Awesome icons in:</p> <ul class="icons"> <li><i class="icon-ok"></i>Bulleted lists (like this one)</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> <li><i class="icon-ok"></i>And many more with Custom CSS</li> </ul> </div> </div> <div class="span4"> <p> <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-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> 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-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> </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> <h3 class="page-header">New Styles in 3.0</h3> <div class="row"> <div class="span4"> <i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. Lots of new possibilities. </div> <div class="span4"> <div class="well well-large well-transparent lead"> <i class="icon-spinner icon-spin icon-2x pull-left"></i> Spinner icon when loading content... </div> </div> <div class="span4"> <p> <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a> </p> <a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a> </div> </div> <h3 class="page-header">Example HTML</h3> <div class="row"> <div class="span12"> <h4>Inline Icons</h4> </div> <div class="span3"> <p>Place Font Awesome icons just about anywhere with the <code><i></code> tag.</p> </div> <div class="span9"> <div class="well well-transparent"> <div style="font-size: 24px; line-height: 1.5em;"> <i class="icon-camera-retro"></i> icon-camera-retro </div> </div> <pre class="prettyprint linenums"> <i class="icon-camera-retro"></i> icon-camera-retro </pre> <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div> </div> </div> <div class="row"> <div class="span12"> <h4>Larger Icons</h4> </div> <div class="span3"> <p> To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>, <code>icon-3x</code>, or <code>icon-4x</code>. </p> </div> <div class="span9"> <p> Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>, <code>icon-3x</code>, or <code>icon-4x</code> classes. </p> <div class="well well-transparent"> <div style="font-size: 24px; line-height: 1.5em;"> <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> </div> </div> <pre class="prettyprint linenums"> <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> </pre> <div class="alert alert-info"> <i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height. </div> </div> </div> <div class="row"> <div class="span12"> <h4>Animated Spinner</h4> </div> <div class="span3"> <p> Use the <code>icon-spin</code> class to get any icon to rotate. Works best with <code>icon-spinner</code> and <code>icon-refresh</code>. </p> </div> <div class="span9"> <div class="well well-large well-transparent lead"> <i class="icon-spinner icon-spin"></i> Spinner icon when loading content... </div> <pre class="prettyprint linenums"> <i class="icon-spinner icon-spin"></i> Spinner icon when loading content... </pre> <p class="alert alert-info"> <i class="icon-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9. </p> </div> </div> <div class="row"> <div class="span3"> </div> <div class="span9"> </div> </div> <div class="row"> <div class="span12"> <h4>Bordered & Pulled Icons</h4> </div> <div class="span3"> <p> Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or article graphics. </p> </div> <div class="span9"> <div class="well well-large well-transparent"> <i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. </div> <pre class="prettyprint linenums"> <i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together ... lots of new possibilities. </pre> <div class="well well-large well-transparent"> <i class="icon-flag icon-4x pull-left icon-border"></i> Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. </div> <pre class="prettyprint linenums"> <i class="icon-flag icon-4x pull-left icon-border"></i> Use a few of the new styles together ... lots of new possibilities. </pre> </div> </div> <div class="row"> <div class="span12"> <h4>Buttons</h4> </div> <div class="span3"> <p> <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> </p> <p> <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> </p> <p> <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> </p> <p> <a class="btn btn-large btn-danger" href="#"><i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a> </p> <p> <a class="btn btn-primary" href="#"><i class="icon-refresh icon-spin"></i> Synchronizing Content...</a> </p> </div> <div class="span9"> <p> Font Awesome icons work great in buttons. You can even combine them with larger icon styles, <code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>. </p> <pre class="prettyprint linenums"> <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> </pre> </div> </div> <div class="row"> <div class="span12"> <h4>Button groups</h4> </div> <div class="span3"> <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="span12"> <h4>Button dropdowns</h4> </div> <div class="span3"> <p> <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> </div> </p> <div class="span9"> <pre class="prettyprint linenums"> <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> </pre> <div class="alert alert-info"><i class="icon-info-sign"></i> Don't forget to add the appropriate JavaScript to