You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pdfbox.apache.org by bu...@apache.org on 2013/05/07 21:46:01 UTC
svn commit: r861229 [10/19] - in /websites/staging/pdfbox/trunk/content: ./
FontAwesome/ FontAwesome/css/ FontAwesome/docs/ FontAwesome/docs/assets/
FontAwesome/docs/assets/css/ FontAwesome/docs/assets/font/
FontAwesome/docs/assets/ico/ FontAwesome/doc...
Added: websites/staging/pdfbox/trunk/content/FontAwesome/docs/index.html
==============================================================================
--- websites/staging/pdfbox/trunk/content/FontAwesome/docs/index.html (added)
+++ websites/staging/pdfbox/trunk/content/FontAwesome/docs/index.html Tue May 7 19:45:58 2013
@@ -0,0 +1,1462 @@
+<!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" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
+<head>
+ <!-- Basic Page Needs
+ ================================================== -->
+ <meta charset="utf-8" />
+ <title>Font Awesome, the iconic font designed for use with Twitter Bootstrap</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <!--<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">-->
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+
+ <!-- CSS
+ ================================================== -->
+
+ <link rel="stylesheet" href="assets/css/site.css">
+ <link rel="stylesheet" href="assets/css/prettify.css">
+ <link rel="stylesheet" href="assets/css/font-awesome.css">
+ <!--[if IE 7]>
+ <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
+ <![endif]-->
+ <!-- Le fav and touch icons -->
+ <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">
+ <!-- Carousel items -->
+ <div class="carousel-inner">
+ <div class="active item"><div><i class="icon-flag"></i></div></div>
+ <div class="item"><div><i class="icon-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>
+ <!-- Carousel nav -->
+ <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">
+<!--[if IE 7]>
+<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
+<![endif]-->
+</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 enable button dropdowns.</div>
+ </div>
+</div>
+<div class="row">
+ <div class="span12">
+ <h4>Lists</h4>
+ </div>
+ <div class="span3">
+ <p>
+ <ul class="icons">
+ <li><i class="icon-ok"></i> Lists</li>
+ <li><i class="icon-ok"></i> Buttons</li>
+ <li><i class="icon-ok"></i> Button groups</li>
+ <li><i class="icon-ok"></i> Navigation</li>
+ <li><i class="icon-ok"></i> Prepended form inputs</li>
+ </ul>
+ </p>
+ </div>
+ <div class="span9">
+ <p>Easily replace individual bullets.</p>
+<pre class="prettyprint linenums">
+<ul class="icons">
+ <li><i class="icon-ok"></i> Lists</li>
+ <li><i class="icon-ok"></i> Buttons</li>
+ <li><i class="icon-ok"></i> Button groups</li>
+ <li><i class="icon-ok"></i> Navigation</li>
+ <li><i class="icon-ok"></i> Prepended form inputs</li>
+</ul>
+</pre>
+ </div>
+</div>
+<div class="row">
+ <div class="span12">
+ <h4>Navigation</h4>
+ </div>
+ <div class="span3">
+ <div class="well" style="padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
+ <li><a href="#"><i class="icon-book"></i> Library</a></li>
+ <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+ <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="span9">
+ <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
+<pre class="prettyprint linenums">
+<ul class="nav nav-list">
+ <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
+ <li><a href="#"><i class="icon-book"></i> Library</a></li>
+ <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+ <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
+</ul>
+</pre>
+ </div>
+</div>
+<div class="row">
+ <div class="span12">
+ <h4>Prepended form inputs</h4>
+ </div>
+ <div class="span3">
+ <p>
+ <form>
+ <div class="input-prepend">
+ <span class="add-on"><i class="icon-envelope"></i></span>
+ <input class="span2" type="text" placeholder="Email address">
+ </div>
+ <div class="input-prepend">
+ <span class="add-on"><i class="icon-key"></i></span>
+ <input class="span2" type="password" placeholder="Password">
+ </div>
+ </form>
+ </p>
+ </div>
+ <div class="span9">
+<pre class="prettyprint linenums">
+<form>
+ <div class="input-prepend">
+ <span class="add-on"><i class="icon-envelope"></i></span>
+ <input class="span2" type="text" placeholder="Email address">
+ </div>
+ <div class="input-prepend">
+ <span class="add-on"><i class="icon-key"></i></span>
+ <input class="span2" type="password" placeholder="Password">
+ </div>
+</form>
+</pre>
+ </div>
+</div>
+<div class="row">
+ <div class="span12">
+ <h4>Custom CSS</h4>
+ </div>
+ <div class="span3">
+ <p>Anything you can do with CSS font styles, 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="contribute">
+ <h2 class="page-header">Contribute Icons to Font Awesome</h2>
+ <div class="row">
+ <div class="span3">
+ <img class="img-rounded" src="assets/img/contribution-sample.png">
+ </div>
+ <div class="span9">
+ <p class="lead">
+ Want to help make Font Awesome even more awesome? Contribute back to the Font Awesome community by designing
+ new pictograms for the set.
+ </p>
+ <p>
+ If selected, you'll retain the CC-BY license to your pictogram and get attribution
+ right here on the Font Awesome site.
+ </p>
+ <h3>How to Submit New Icons</h3>
+ <ol>
+ <li>Download the <a href="assets/img/icon-flag.pdf">icon-flag.pdf template</a>.</li>
+ <li>
+ Open the PDF in Adobe Illustrator. You'll notice the file has dimensions of 60x56. This is exactly 4x the
+ max icon size of 15 wide by 14 tall. The template is an example of the flag icon to use as a guide.
+ </li>
+ <li>
+ Design your icon. In order to make it into the set, your icon must look pixel perfect. The easiest way to do
+ this is to make sure your line widths in the template are some multiple of 4px. Diagonals are rough, too.
+ Don't split pixels right down the middle, as they blur more when rendering. Zoom out to 25% to get a good idea
+ of how it will render in the font.
+ </li>
+ <li>
+ Submit your icon. Drop me an email at <a href="mailto:dave@davegandy.com">dave@davegandy.com</a>. Make sure to
+ use the subject <code>[Font Awesome] [Icon Contribution] icon-name</code> and attach your PDF file. If your
+ icon makes it into Font Awesome (I'm keeping a very tight reign on quality), I'll ask what contact info you'd
+ like to use for attribution.
+ </li>
+ </ol>
+ </div>
+ </div>
+
+</section>
+
+<section id="roadmap">
+ <h2 class="page-header">Roadmap</h2>
+ <p>Here's the plan for future updates.</p>
+ <ul class="icons">
+ <li><i class="icon-plus"></i>Easier sub-setting with icon packs.</li>
+ <li><i class="icon-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="icon-plus"></i>Tricks and tips for super-awesome creative CSS methods, like the star example above.</li>
+ </ul>
+</section>
+
+<section id="license">
+ <h2 class="page-header">License</h2>
+ <ul>
+ <li>The Font Awesome font is licensed under the <a href="http://scripts.sil.org/OFL" target="_blank">SIL Open Font License - http://scripts.sil.org/OFL</a>.</li>
+ <li>Font Awesome CSS, LESS, and SASS files are licensed under the <a href="http://opensource.org/licenses/mit-license.html" target="_blank">MIT License - http://opensource.org/licenses/mit-license.html</a>.</li>
+ <li>The Font Awesome pictograms are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/</a></li>
+ <li>Attribution is no longer required in Font Awesome 3.0, but much appreciated: <code>Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome</code>.</li>
+ </ul>
+ <p></p>
+ <p></p>
+</section>
+
+<section id="kyruus">
+ <h2 class="page-header"><a href="http://kyruus.com" target="_blank">Kyruus</a></h2>
+ <div class="row">
+ <div class="span7">
+ <p>
+ I'm the lead product designer at Kyruus. I wake up every single day excited about my job.
+ Why? <strong>Kyruus is going to change healthcare.</strong> No exaggeration.
+ </p>
+
+ <p>
+ Kyruus is a well-funded, big data healthcare startup in Boston. We believe that the right data at the right time
+ can help doctors make better decisions. <strong>We believe data can save lives.</strong>
+ </p>
+
+ What I love about Kyruus:
+ <ul class="unstyled">
+ <li><i class="icon-pencil icon-2x pull-left"></i> Product design. From the top of the organization, Kyruus is committed to product design done right. It's awesome.</li>
+ <li><i class="icon-globe icon-2x pull-left"></i> Purpose. Every day, I get to help make the world a better place â a little at a time.</li>
+ <li><i class="icon-group icon-2x pull-left"></i> People. I work with some of the best people I've ever met. More than just smart people. Good people.</li>
+ </ul>
+
+ <p>
+ <strong>Kyruus needs good people.</strong> Designers, app developers, big data masters, & interns that get real responsibility. Come work with me.
+ </p>
+
+ Interested? <a href="mailto:dave@davegandy.com">Email me.</a>
+ </div>
+ <div class="span5">
+ <div class="border pull-right text-align-center">
+ <a href="http://kyruus.com" target="_blank">
+ <i class="icon-medkit"></i><br>
+ Work with me at Kyruus
+ </a>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section id="say-thanks">
+ <h2 class="page-header">Say Thanks <small></small></h2>
+ <div class="row">
+ <div class="span12">
+ <p class="lead">
+ <i class="icon-gift icon-4x pull-left"></i>
+ Hopefully you think Font Awesome <em>is</em> awesome. I've put hundreds of hours into the project to give back to the
+ open source community. If you'd like, here are some ways you can tell me thanks for all my hard work.
+ </p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span4">
+ <h4><a href="#contribute">Contribute Icons</a></h4>
+ <p>
+ <a href="#contribute">Contribute icons</a> to make Font Awesome even awesome-er.
+ </p>
+ </div>
+ <div class="span4">
+ <h4><a href="http://www.shareagift.com/pages/giftpage.aspx?giftid=2472" target="_blank">Help me buy an iMac</a></h4>
+ <p>
+ <a href="http://www.shareagift.com/pages/giftpage.aspx?giftid=2472" target="_blank">Contribute</a> to a shiny
+ new iMac for me to keep making great icons.
+ </p>
+ </div>
+ <div class="span4">
+ <h4><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h4>
+ <p>
+ Or pick something straight
+ from <a href="http://amzn.com/w/G64X58AY416W" target="_blank">my wish list</a>. Gift cards are great.
+ </p>
+ </div>
+ </div>
+</section>
+
+</div>
+
+<footer>
+ <div class="container">
+ <div class="row">
+ <div class="span4">
+ <h2>Contact</h2>
+ <ul class="icons">
+ <li><i class="icon-envelope"></i> Email: <a href="mailto:dave@davegandy.com">Dave Gandy</a></li>
+ <li><i class="icon-twitter"></i> Twitter: <a href="https://twitter.com/fortaweso_me/" target="_blank">@FortAweso_me</a></li>
+ <li><i class="icon-wrench"></i> Work: Lead Product Designer @ <a href="#kyruus">Kyruus</a></li>
+ </ul>
+ </div>
+ <div class="span8">
+ <h2>Special Thanks</h2>
+ <p>
+ Special thanks to <a href="https://twitter.com/robmadole/" target="_blank">@robmadole</a> and
+ <a href="https://twitter.com/supercodepoet/" target="_blank">@supercodepoet</a> for icon design
+ review, advice, and some backbone.js help.
+ </p>
+ <p>
+ Special thanks to <a target="_blank" href="https://twitter.com/grantgordon">@grantgordon</a> and
+ <a target="_blank" href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing
+ <a target="_blank" href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome to get just the
+ icons you need.
+ </p>
+ </div>
+ </div>
+ </div>
+</footer>
+
+
+
+<script type="text/template" id="modal-template">
+ <div class="modal hide fade in">
+ <div class="modal-header">
+ <a class="close" data-dismiss="modal"><i class="icon-remove"></i></a>
+ <h4><%= iconName %></h4>
+ </div>
+ <div class="modal-body">
+ <div class="row">
+ <div class="span3 icon6">
+ <div class="thumbnail">
+ <div><i class="<%= iconName %>"></i></div>
+ 280px
+ </div>
+ </div>
+ <div class="span3 icon5">
+ <div class="thumbnail">
+ <div><i class="<%= iconName %>"></i></div>
+ 140px
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span2 icon4">
+ <div class="thumbnail">
+ <div><i class="<%= iconName %>"></i></div>
+ 112px
+ </div>
+ </div>
+ <div class="span2 icon3">
+ <div class="thumbnail">
+ <div><i class="<%= iconName %>"></i></div>
+ 56px
+ </div>
+ </div>
+ <div class="span1 icon2">
+ <div class="thumbnail">
+ <div><i class="<%= iconName %>"></i></div>
+ 28px
+ </div>
+ </div>
+ <div class="span1 icon1">
+ <div class="thumbnail">
+ <div><i class="<%= iconName %>"></i></div>
+ 14px
+ </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/bootstrap-222.min.js"></script>
+<script src="assets/js/index/index.js"></script>
+
+</body>
+</html>