pdfbox-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From build...@apache.org
Subject 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...
Date Tue, 07 May 2013 19:46:01 GMT
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>&lt;head&gt;</code> of your html, reference the location to your font-awesome.min.css.
+<pre class="prettyprint linenums">
+&lt;link rel="stylesheet" href="../css/bootstrap.min.css"&gt;
+&lt;link rel="stylesheet" href="../css/font-awesome.min.css"&gt;
+</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>&lt;head&gt;</code> of your html, reference the location to your font-awesome-ie7.min.css.
+<pre class="prettyprint linenums">
+&lt;link rel="stylesheet" href="../css/bootstrap.min.css"&gt;
+&lt;link rel="stylesheet" href="../css/font-awesome.min.css"&gt;
+&lt;!--[if IE 7]&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/font-awesome-ie7.min.css&quot;&gt;
+&lt;![endif]--&gt;
+</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>&lt;i&gt;</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">
+&lt;i class="icon-camera-retro"&gt;&lt;/i&gt; 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">
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-large&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-2x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-3x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+&lt;p&gt;&lt;i class=&quot;icon-camera-retro icon-4x&quot;&gt;&lt;/i&gt; icon-camera-retro&lt;/p&gt;
+</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">
+&lt;i class=&quot;icon-spinner icon-spin&quot;&gt;&lt;/i&gt; 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">
+&lt;i class=&quot;icon-quote-left icon-4x pull-left icon-muted&quot;&gt;&lt;/i&gt;
+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">
+&lt;i class=&quot;icon-flag icon-4x pull-left icon-border&quot;&gt;&lt;/i&gt;
+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">
+&lt;a class="btn" href="#"&gt;
+  &lt;i class="icon-repeat"&gt;&lt;/i&gt; Reload&lt;/a&gt;
+&lt;a class="btn btn-success" href="#"&gt;
+  &lt;i class="icon-shopping-cart icon-large"&gt;&lt;/i&gt; Checkout&lt;/a&gt;
+&lt;a class="btn btn-large btn-primary" href="#"&gt;
+  &lt;i class="icon-comment"&gt;&lt;/i&gt; Comment&lt;/a&gt;
+&lt;a class="btn btn-small btn-info" href="#"&gt;
+  &lt;i class="icon-info-sign"&gt;&lt;/i&gt; Info&lt;/a&gt;
+&lt;a class="btn btn-danger" href="#"&gt;
+  &lt;i class="icon-trash icon-large"&gt;&lt;/i&gt; Delete&lt;/a&gt;
+&lt;a class="btn btn-small" href="#"&gt;
+  &lt;i class="icon-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;
+&lt;a class=&quot;btn btn-large btn-danger&quot; href=&quot;#&quot;&gt;
+  &lt;i class=&quot;icon-flag icon-2x pull-left&quot;&gt;&lt;/i&gt;Font Awesome&lt;br&gt;Version 3.0&lt;/a&gt;
+&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot;&gt;
+  &lt;i class=&quot;icon-refresh icon-spin&quot;&gt;&lt;/i&gt; Synchronizing Content...&lt;/a&gt;
+</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">
+&lt;div class="btn-group"&gt;
+  &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
+  &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
+&lt;/div&gt;
+</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">
+&lt;div class="btn-group open"&gt;
+    &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt; User&lt;/a&gt;
+    &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="icon-caret-down"&gt;&lt;/span&gt;&lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
+        &lt;li class="divider"&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+&lt;/div&gt;
+</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">
+&lt;ul class="icons"&gt;
+  &lt;li&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Lists&lt;/li&gt;
+  &lt;li&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Buttons&lt;/li&gt;
+  &lt;li&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Button groups&lt;/li&gt;
+  &lt;li&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Navigation&lt;/li&gt;
+  &lt;li&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Prepended form inputs&lt;/li&gt;
+&lt;/ul&gt;
+</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">
+&lt;ul class="nav nav-list"&gt;
+  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-cogs"&gt;&lt;/i&gt; Settings&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</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">
+&lt;form&gt;
+  &lt;div class="input-prepend"&gt;
+    &lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
+    &lt;input class="span2" type="text" placeholder="Email address"&gt;
+  &lt;/div&gt;
+  &lt;div class="input-prepend"&gt;
+    &lt;span class="add-on"&gt;&lt;i class="icon-key"&gt;&lt;/i&gt;&lt;/span&gt;
+    &lt;input class="span2" type="password" placeholder="Password"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</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>



Mime
View raw message