Merge branch 'dev' of https://github.com/redmatrix/hubzilla into dev_merge

91 files changed, 1734 insertions, 997 deletions

diff --git a/library/font_awesome/src/_includes/accessibility/background.html b/library/font_awesome/src/_includes/accessibility/background.html
new file mode 100644
index 000000000..5ca864826
--- /dev/null
+++ b/library/font_awesome/src/_includes/accessibility/background.html
@@ -0,0 +1,15 @@
+<div id="background">
+  <h2 class="page-header">Icon Fonts &amp; Accessibility</h2>
+  <p>
+    Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When trying our default markup for rendering icons, assisistive technology may have the following problems.
+  </p>
+
+  <ul>
+    <li>
+      The assistive technology may not find any content to read out to a user
+    </li>
+    <li>
+      The assistive technology may read the unicode equivalent, which could not match up to what the icon means in context, or worse is just plain confusing
+    </li>
+  </ul>
+</div>
diff --git a/library/font_awesome/src/_includes/accessibility/other.html b/library/font_awesome/src/_includes/accessibility/other.html
new file mode 100644
index 000000000..8a1078383
--- /dev/null
+++ b/library/font_awesome/src/_includes/accessibility/other.html
@@ -0,0 +1,17 @@
+<div id="other">
+  <h2 class="page-header">Other cases and information</h2>
+  <p>
+    While the scenarios and techniques above help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend.
+  </p>
+
+  <ul>
+    <li><a href="https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html">https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html</a></li>
+    <li><a href="https://css-tricks.com/html-for-icon-font-usage/">https://css-tricks.com/html-for-icon-font-usage/</a></li>
+    <li><a href="http://www.sitepoint.com/icon-fonts-vs-svg-debate/">http://www.sitepoint.com/icon-fonts-vs-svg-debate/</a></li>
+    <li><a href="http://leaverou.github.io/contrast-ratio">http://leaverou.github.io/contrast-ratio/</a></li>
+  </ul>
+
+  <p>
+    We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>.
+  </p>
+</div>
diff --git a/library/font_awesome/src/_includes/accessibility/using-with-accessibility.html b/library/font_awesome/src/_includes/accessibility/using-with-accessibility.html
new file mode 100644
index 000000000..86e6d609c
--- /dev/null
+++ b/library/font_awesome/src/_includes/accessibility/using-with-accessibility.html
@@ -0,0 +1,127 @@
+<div id="using-with-accessibility">
+  <h2 class="page-header">Using Font Awesome with Acessibility in mind</h2>
+  <p>
+    When using icons in your UI, there are ways to help assistive technology either ignore or better understand Font Awesome.
+  </p>
+
+  <h3>Icons used for pure decoration or visual styling</h3>
+  <p>
+    If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup.
+  </p>
+
+  <div class="margin-top-lg margin-bottom-lg">
+{% highlight html %}
+<i class="fa fa-fighter-jet" aria-hidden="true"></i>
+{% endhighlight %}
+<small class="text-muted">an icon being used as pure decoration</small>
+  </div>
+
+  <div class="margin-bottom-lg">
+{% highlight html %}
+<h1 class="logo">
+  <i class="fa fa-pied-piper" aria-hidden="true"></i>
+  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
+</h1>
+{% endhighlight %}
+<small class="text-muted">an icon being used as a logo</small>
+  </div>
+
+  <div class="margin-bottom-lg">
+{% highlight html %}
+<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
+{% endhighlight %}
+<small class="text-muted">an icon being used in front of link text</small>
+  </div>
+
+  <h3>Icons with semantic or interactive purpose</h3>
+  <p>
+    If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this:
+  </p>
+
+  <h4>If an icon is <strong>not</strong> an interactive element</h4>
+  <p>
+    The simplest way to provide a text alternative is to use the <code>aria-hidden="true"</code> attribute on the icon and to include the text with an additional element, such as a <code>&lt;span&gt;</code>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a <code>title</code> attribute on the icon to provide a tooltip for sighted mouse users.
+  </p>
+
+  <div class="margin-bottom-lg margin-top-lg">
+{% highlight html %}
+<dl>
+  <dt>
+    <i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i>
+    <span class="sr-only">Time to destination by car:</span>
+  </dt>
+  <dd>4 minutes</dd>
+
+  <dt>
+    <i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i>
+    <span class="sr-only">Time to destination by bike:</span>
+  </dt>
+  <dd>12 minutes</dd>
+</dl>
+{% endhighlight %}
+    <small class="text-muted">an icon being used to communicate travel methods</small>
+  </div>
+
+  <div class="margin-bottom-lg margin-top-lg">
+{% highlight html %}
+<i class="fa fa-hourglass" aria-hidden="true" title="60 minutes remain in your exam"></i>
+<span class="sr-only">60 minutes remain in your exam</span>
+
+<i class="fa fa-hourglass-half" aria-hidden="true" title="30 minutes remain in your exam"></i>
+<span class="sr-only">30 minutes remain in your exam</span>
+
+<i class="fa fa-hourglass-end" aria-hidden="true" title="0 minutes remain in your exam"></i>
+<span class="sr-only">0 minutes remain in your exam</span>
+{% endhighlight %}
+    <small class="text-muted">an icon being used to denote time remaining</small>
+  </div>
+
+  <h4>If an icon represents an interactive element</h4>
+  <p>
+    In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code>&lt;span&gt;</code> or similar. For instance, simply adding the <code>title</code> attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip.
+  </p>
+
+  <div class="margin-bottom-lg margin-top-lg">
+{% highlight html %}
+<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
+  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+</a>
+{% endhighlight %}
+    <small class="text-muted">an icon being used to communicate shopping cart state</small>
+  </div>
+
+  <div class="margin-bottom-lg margin-top-lg">
+{% highlight html %}
+<a href="#navigation-main" title="Skip to main navigation">
+  <i class="fa fa-bars" aria-hidden="true"></i>
+</a>
+{% endhighlight %}
+    <small class="text-muted">an icon being used as a link to a navigation menu</small>
+
+{% highlight html %}
+<a class="btn btn-danger" href="path/to/settings" title="Delete">
+  <i class="fa fa-trash-o" aria-hidden="true"></i>
+</a>
+{% endhighlight %}
+    <small class="text-muted">an icon being used as a delete button's symbol</small>
+
+  </div>
+</div>
+
+<div class="alert alert-success">
+  <ul class="fa-ul margin-bottom-none">
+    <li>
+      <i class="fa-li fa fa-info-circle fa-lg" aria-hidden="true"></i>
+      Bootstrap comes with a <a href="http://getbootstrap.com/css/#callout-has-feedback-icon-accessibility">utility class to visually hide content, but keep it semantically accessible</a>. If you're not using Bootstrap, there are <a href="https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">plenty</a> of <a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L124">recipes</a> to roll your own from.
+    </li>
+  </ul>
+</div>
+
+<div class="alert alert-success">
+  <ul class="fa-ul margin-bottom-none">
+    <li>
+      <i class="fa-li fa fa-info-circle fa-lg" aria-hidden"true"></i>
+      <a href="{{ page.relative_path }}examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI.
+    </li>
+  </ul>
+</div>
diff --git a/library/font_awesome/src/_includes/ads/carbon-dark-vertical.html b/library/font_awesome/src/_includes/ads/carbon-dark-vertical.html
deleted file mode 100644
index 15804e73a..000000000
--- a/library/font_awesome/src/_includes/ads/carbon-dark-vertical.html
+++ /dev/null
@@ -1 +0,0 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_VERTDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
diff --git a/library/font_awesome/src/_includes/ads/carbon-light-horizontal.html b/library/font_awesome/src/_includes/ads/carbon-light-horizontal.html
deleted file mode 100644
index 8dcfb61b6..000000000
--- a/library/font_awesome/src/_includes/ads/carbon-light-horizontal.html
+++ /dev/null
@@ -1 +0,0 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
diff --git a/library/font_awesome/src/_includes/ads/carbon-light-vertical.html b/library/font_awesome/src/_includes/ads/carbon-light-vertical.html
deleted file mode 100644
index e6fce26a9..000000000
--- a/library/font_awesome/src/_includes/ads/carbon-light-vertical.html
+++ /dev/null
@@ -1 +0,0 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
diff --git a/library/font_awesome/src/_includes/ads/fusion.html b/library/font_awesome/src/_includes/ads/fusion.html
new file mode 100644
index 000000000..c49a9f42c
--- /dev/null
+++ b/library/font_awesome/src/_includes/ads/fusion.html
@@ -0,0 +1 @@
+<script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
diff --git a/library/font_awesome/src/_includes/brand-adblock-warning.html b/library/font_awesome/src/_includes/brand-adblock-warning.html
new file mode 100644
index 000000000..9f4ddd8b6
--- /dev/null
+++ b/library/font_awesome/src/_includes/brand-adblock-warning.html
@@ -0,0 +1,5 @@
+<h4><i class="fa fa-warning" aria-hidden"true"></i> Warning!</h4>
+Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
+Media Buttons" setting. We will not use hacks to force them to display. Please
+<a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
+an error. To work around this, you'll need to modify the social icon class names.
diff --git a/library/font_awesome/src/_includes/brand-license.html b/library/font_awesome/src/_includes/brand-license.html
index 07dea295a..79696801e 100644
--- a/library/font_awesome/src/_includes/brand-license.html
+++ b/library/font_awesome/src/_includes/brand-license.html
@@ -1,4 +1,5 @@
-<ul class="margin-bottom-none">
+<ul class="margin-bottom-none padding-left-lg">
   <li>All brand icons are trademarks of their respective owners.</li>
   <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
+  <li>Brand icons should only be used to represent the company or product to which they refer.</li>
 </ul>
diff --git a/library/font_awesome/src/_includes/cheatsheet.html b/library/font_awesome/src/_includes/cheatsheet.html
deleted file mode 100644
index 81e508c45..000000000
--- a/library/font_awesome/src/_includes/cheatsheet.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  Print this page to PDF for the complete set of vectors. Or to use on the desktop, install FontAwesome.otf and copy
-  and paste the icons (not the unicode) directly into your designs.
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-<h2 class="page-header">Every Font Awesome {{ site.fontawesome.version }} Icon, CSS Class, &amp; Unicode</h2>
-
-<div class="row">
-{% for icon in icons %}
-  <div class="span4">
-    <i class="icon-fixed-width">&#x{{ icon.unicode }}</i>
-    icon-{{ icon.id }}
-    <span class="muted">(&amp;#x{{ icon.unicode }};)</span>
-  </div>
-{% endfor %}
-</div>
diff --git a/library/font_awesome/src/_includes/code/core.less b/library/font_awesome/src/_includes/code/core.less
new file mode 100644
index 000000000..cbd0d1ae7
--- /dev/null
+++ b/library/font_awesome/src/_includes/code/core.less
@@ -0,0 +1,6 @@
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
diff --git a/library/font_awesome/src/_includes/code/core.scss b/library/font_awesome/src/_includes/code/core.scss
new file mode 100644
index 000000000..c7ea6e0e3
--- /dev/null
+++ b/library/font_awesome/src/_includes/code/core.scss
@@ -0,0 +1,6 @@
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
diff --git a/library/font_awesome/src/_includes/code/license.css b/library/font_awesome/src/_includes/code/license.css
new file mode 100644
index 000000000..7e503a805
--- /dev/null
+++ b/library/font_awesome/src/_includes/code/license.css
@@ -0,0 +1,4 @@
+/*!
+ *  Font Awesome {{ site.fontawesome.version }} by @{{ site.fontawesome.author.twitter }} - {{ site.fontawesome.url }} - @{{ site.fontawesome.twitter }}
+ *  License - {{ site.fontawesome.url }}/license (Font: {{ site.fontawesome.license.font.version }}, CSS: {{ site.fontawesome.license.code.version }})
+ */
\ No newline at end of file
diff --git a/library/font_awesome/src/_includes/community.html b/library/font_awesome/src/_includes/community.html
deleted file mode 100644
index f6ba9f060..000000000
--- a/library/font_awesome/src/_includes/community.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  Font Awesome has a vibrant community of folks helping each other out. You can
-  <a href="#getting-support">get support</a>,
-  <a href="#reporting-bugs">report bugs</a>,
-  <a href="#requesting-new-icons">request new icons</a>,
-  <a href="#submitting-pull-requests">submit pull requests</a>, and
-  <a href="#project-milestones">check upcoming milestones</a>.
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-{% include community/getting-support.html %}
-{% include community/reporting-bugs.html %}
-{% include community/requesting-new-icons.html %}
-{% include community/submitting-pull-requests.html %}
-{% include community/project-milestones.html %}
-
-{% include thanks-to.html %}
-{% include tell-me-thanks.html %}
diff --git a/library/font_awesome/src/_includes/community/project-milestones.html b/library/font_awesome/src/_includes/community/project-milestones.html
index ba2a4e493..598569981 100644
--- a/library/font_awesome/src/_includes/community/project-milestones.html
+++ b/library/font_awesome/src/_includes/community/project-milestones.html
@@ -2,6 +2,6 @@
   <h2 class="page-header">Project Milestones</h2>
   <p>
     Want to keep up with what's planned for Font Awesome? Check out our
-    <a href="{{ site.fontawesome.github.url }}/issues/milestones">milestones</a> on the GitHub project.
+    <a href="{{ site.fontawesome.github.url }}/milestones">milestones</a> on the GitHub project.
   </p>
 </section>
diff --git a/library/font_awesome/src/_includes/community/reporting-bugs.html b/library/font_awesome/src/_includes/community/reporting-bugs.html
index 3dde63fa5..b8fb61e49 100644
--- a/library/font_awesome/src/_includes/community/reporting-bugs.html
+++ b/library/font_awesome/src/_includes/community/reporting-bugs.html
@@ -5,7 +5,7 @@
   </p>
   <ol>
     <li>Please be nice. Font Awesome is a happy place.</li>
-    <li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists.</li>
+    <li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your bug was already reported.</li>
     <li>
       Before opening any issue, please read the generic <a href="https://github.com/necolas/issue-guidelines">issue
       guidelines</a>, by <a href="https://github.com/necolas/">Nicolas Gallagher</a>.
diff --git a/library/font_awesome/src/_includes/community/requesting-new-icons.html b/library/font_awesome/src/_includes/community/requesting-new-icons.html
index d710e2bb1..e73f41c35 100644
--- a/library/font_awesome/src/_includes/community/requesting-new-icons.html
+++ b/library/font_awesome/src/_includes/community/requesting-new-icons.html
@@ -7,21 +7,23 @@
   </p>
   <ol>
     <li>Please be nice. Font Awesome is a happy place.</li>
-    <li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists.</li>
+    <li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists. If a request is found, please +1 that one.</li>
+    <li>
+      Please make requests for single icons, unless you are requesting a couple of strictly related icons (e.g., thumbs-up/thumbs-down).
+    </li>
     <li>
       Please and thank you if you include the following:
       <ul>
         <li>
-          Title your <a href="{{ site.fontawesome.github.url }}/issues/new?title=Icon%20Request:%20icon-name">new issue</a>
-          <code>Icon request: icon-name</code>.
+          Title your <a href="{{ site.fontawesome.github.url }}/issues/new?title=Icon%20Request:%20fa-">new issue</a>
+          <code>Icon request: icon-name</code> (e.g., <code>Icon request: icon-car</code>).
         </li>
         <li>Include a few use cases for your requested icon. How do you plan on using it?</li>
         <li>Attach a single color image or two that represent the idea you're going for.</li>
       </ul>
     </li>
     <li>
-      Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon
-      to represent happiness. It's easier to make a smiley face. <i class="icon-smile"></i>
+      Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face.  <i class="fa fa-smile-o" title="Smiling face"></i>
     </li>
   </ol>
 </section>
diff --git a/library/font_awesome/src/_includes/community/submitting-pull-requests.html b/library/font_awesome/src/_includes/community/submitting-pull-requests.html
index de79930e6..1a55aba7b 100644
--- a/library/font_awesome/src/_includes/community/submitting-pull-requests.html
+++ b/library/font_awesome/src/_includes/community/submitting-pull-requests.html
@@ -2,8 +2,9 @@
   <h2 class="page-header">Submitting Pull Requests</h2>
   Found a way to solve a bug in Font Awesome? Want to contribute new features? Here are a few things to remember:
   <ol>
+    <li>Please do not submit new icons.</li>
     <li>Please submit all pull requests against *-wip branches.</li>
-    <li>All pull requests submitted against master will be sumarily closed and this guide referenced.</li>
+    <li>All pull requests submitted against master will be summarily closed and this guide referenced.</li>
     <li>
       After doing everything above, feel free to
       <a href="{{ site.fontawesome.github.url }}/issues/new">submit a pull request</a>.
diff --git a/library/font_awesome/src/_includes/examples.html b/library/font_awesome/src/_includes/examples.html
deleted file mode 100644
index 0598e28be..000000000
--- a/library/font_awesome/src/_includes/examples.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  After you <a href="{{ page.relative_path }}get-started/">get up and running</a>, you can place Font Awesome icons just about
-  anywhere with the <code>&lt;i&gt;</code> tag.
-  Many examples appreciatively re-used from the <a href="{{ site.bootstrap.url }}">Bootstrap documentation</a>.
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-{% include examples/new.html %}
-
-{% include examples/inline-icons.html %}
-{% include examples/larger-icons.html %}
-{% include examples/bordered-pulled.html %}
-{% include examples/buttons.html %}
-{% include examples/button-groups.html %}
-{% include examples/button-dropdowns.html %}
-{% include examples/bulleted-lists.html %}
-{% include examples/navigation.html %}
-{% include examples/form-inputs.html %}
-{% include examples/animated-spinner.html %}
-{% include examples/rotated-flipped.html %}
-{% include examples/stacked.html %}
-{% include examples/custom.html %}
diff --git a/library/font_awesome/src/_includes/examples/accessible.html b/library/font_awesome/src/_includes/examples/accessible.html
new file mode 100644
index 000000000..2f51aed9c
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/accessible.html
@@ -0,0 +1,109 @@
+<section id="accessible">
+  <h2 class="page-header">
+    Accessibility-Minded
+  </h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <p>
+        <a class="btn btn-default" href="path/to/settings">
+          <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
+          <span class="sr-only">Settings</span>
+        </a>
+
+        <a class="btn btn-danger" href="path/to/settings">
+          <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
+          <span class="sr-only">Delete</span>
+        </a>
+
+        <a class="btn btn-primary" href="#navigation-main">
+          <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
+          <span class="sr-only">Skip to main navigation</span>
+        </a>
+      </p>
+
+      <p>
+        <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">Refreshing...</span>
+
+        <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">Saving. Hang tight!</span>
+      </p>
+
+      <p>
+        <div class="input-group margin-bottom-sm">
+          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
+          <input class="form-control" type="text" placeholder="Email address">
+        </div>
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
+          <input class="form-control" type="password" placeholder="Password">
+        </div>
+      </p>
+
+      <p>
+        <a href="path/to/shopping/cart" class="btn btn-primary">
+          <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
+          <span class="sr-only">View 3 items in your shopping cart</span>
+        </a>
+      </p>
+
+      <p>
+        <i class="fa fa-battery-half" aria-hidden="true"></i>
+        <span class="sr-only">Battery level: 50%</span>
+      </p>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        With <a href="{{ page.relative_path }}accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
+      </p>
+
+{% highlight html %}
+<a class="btn btn-default" href="path/to/settings">
+  <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
+  <span class="sr-only">Settings</span>
+</a>
+
+<a class="btn btn-danger" href="path/to/settings">
+  <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
+  <span class="sr-only">Delete</span>
+</a>
+
+<a class="btn btn-primary" href="#navigation-main">
+  <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
+  <span class="sr-only">Skip to main navigation</span>
+</a>
+{% endhighlight %}
+
+{% highlight html %}
+<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+<span class="sr-only">Refreshing...</span>
+
+<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+<span class="sr-only">Saving. Hang tight!</span>
+{% endhighlight %}
+
+{% highlight html %}
+<div class="input-group margin-bottom-sm">
+  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
+  <input class="form-control" type="text" placeholder="Email address">
+</div>
+<div class="input-group">
+  <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
+  <input class="form-control" type="password" placeholder="Password">
+</div>
+{% endhighlight %}
+
+{% highlight html %}
+<a href="path/to/shopping/cart" class="btn btn-primary">
+  <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
+  <span class="sr-only">View 3 items in your shopping cart</span>
+</a>
+{% endhighlight %}
+
+{% highlight html %}
+<i class="fa fa-battery-half" aria-hidden="true"></i>
+<span class="sr-only">Battery level: 50%</span>
+{% endhighlight %}
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/animated-spinner.html b/library/font_awesome/src/_includes/examples/animated-spinner.html
deleted file mode 100644
index eee013a11..000000000
--- a/library/font_awesome/src/_includes/examples/animated-spinner.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<section id="animated-spinner">
-  <h2 class="page-header">Animated Spinner</h2>
-  <div class="row">
-    <div class="span3">
-      Use the <code>icon-spin</code> class to get any icon to rotate. Works well with <code>icon-spinner</code> and
-      <code>icon-refresh</code>.
-    </div>
-    <div class="span9">
-      <div class="well well-large well-transparent lead">
-        <i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...
-      </div>
-{% highlight html %}
-<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...
-{% endhighlight %}
-      <p class="alert alert-info">
-        <i class="icon-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9.
-      </p>
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/animated.html b/library/font_awesome/src/_includes/examples/animated.html
new file mode 100644
index 000000000..960ebd182
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/animated.html
@@ -0,0 +1,60 @@
+<section id="animated">
+  <h2 class="page-header">
+    Animated Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/animated.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_animated.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <p>
+        <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
+        <span class="sr-only">Loading example (with fa-spinner icon)</span>
+
+        <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
+        <span class="sr-only">Loading (with fa-circle-o-notch icon)</span>
+
+        <i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
+        <span class="sr-only">Loading example (with fa-refresh icon)</span>
+
+        <i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
+        <span class="sr-only">Loading example (with fa-cog icon)</span>
+
+        <i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+        <span class="sr-only">Loading example (with fa-spinner icon)</span>
+      </p>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
+        with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
+      </p>
+{% highlight html %}
+<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+{% endhighlight %}
+      <p class="alert alert-success">
+        <i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong>
+        Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
+        <a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a>
+        for examples and possible workarounds.
+      </p>
+      <p class="alert alert-success">
+        <i class="fa fa-info-circle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong> CSS3 animations aren't supported in IE8 - IE9.
+      </p>
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/basic.html b/library/font_awesome/src/_includes/examples/basic.html
new file mode 100644
index 000000000..2b691a0b5
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/basic.html
@@ -0,0 +1,39 @@
+<section id="basic">
+  <h2 class="page-header">
+    Basic Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/core.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_core.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
+
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <p>
+        <i class="fa fa-camera-retro" aria-hidden="true"></i>
+        <span class="sr-only">Example: basic icon</span>
+        fa-camera-retro
+      </p>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        You can place Font Awesome icons just about anywhere using the CSS Prefix <code>fa</code> and the icon's
+        name. Font Awesome is designed to be used with inline elements (we like the <code>&lt;i&gt;</code> tag for
+        brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
+      </p>
+{% highlight html %}
+<i class="fa fa-camera-retro" aria-hidden="true"></i> fa-camera-retro
+{% endhighlight %}
+      <div class="alert alert-success">
+        <ul class="fa-ul">
+          <li>
+            <i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
+            <strong class="sr-only">Example: basic icon</strong>
+            If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,
+            drop shadow, and anything else that gets inherited using CSS.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/bootstrap.html b/library/font_awesome/src/_includes/examples/bootstrap.html
new file mode 100644
index 000000000..0d6c03b8f
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/bootstrap.html
@@ -0,0 +1,111 @@
+<section id="bootstrap">
+  <h2 class="page-header">Bootstrap 3 Examples</h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <p>
+        <a class="btn btn-danger" href="#">
+          <i class="fa fa-trash-o fa-lg"  aria-hidden="true"></i> Delete</a>
+        <a class="btn btn-default btn-sm" href="#">
+          <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
+      </p>
+      <p>
+        <a class="btn btn-lg btn-success" href="#">
+          <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+      </p>
+      <div class="margin-bottom">
+        <div class="btn-group">
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-left" title="Align Left"></i>
+          </a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-center" title="Align Center"></i>
+          </a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-right" title="Align Right"></i>
+          </a>
+          <a class="btn btn-default" href="#">
+            <i class="fa fa-align-justify" title="Align Justify"></i>
+          </a>
+        </div>
+      </div>
+      <div class="margin-bottom">
+        <div class="input-group margin-bottom-sm">
+          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
+          <input class="form-control" type="text" placeholder="Email address">
+        </div>
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
+          <input class="form-control" type="password" placeholder="Password">
+        </div>
+      </div>
+      <div class="margin-bottom">
+        <div class="btn-group open">
+          <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i> User</a>
+          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+            <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
+            <li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
+            <li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
+            <li class="divider"></li>
+            <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        Font Awesome works great with the full range of Bootstrap components.
+      </p>
+{% highlight html %}
+<a class="btn btn-danger" href="#">
+  <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>
+<a class="btn btn-default btn-sm" href="#">
+  <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
+
+<a class="btn btn-lg btn-success" href="#">
+  <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+
+<div class="btn-group">
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-left" title="Align Left"></i>
+  </a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-center" title="Align Center"></i>
+  </a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-right" title="Align Right"></i>
+  </a>
+  <a class="btn btn-default" href="#">
+    <i class="fa fa-align-justify" title="Align Justify"></i>
+  </a>
+</div>
+
+<div class="input-group margin-bottom-sm">
+  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
+  <input class="form-control" type="text" placeholder="Email address">
+</div>
+<div class="input-group">
+  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
+  <input class="form-control" type="password" placeholder="Password">
+</div>
+
+<div class="btn-group open">
+  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
+  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
+  </a>
+  <ul class="dropdown-menu">
+    <li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
+    <li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
+    <li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
+  </ul>
+</div>
+{% endhighlight %}
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/bordered-pulled.html b/library/font_awesome/src/_includes/examples/bordered-pulled.html
index b5aa2bf17..33f9922ed 100644
--- a/library/font_awesome/src/_includes/examples/bordered-pulled.html
+++ b/library/font_awesome/src/_includes/examples/bordered-pulled.html
@@ -1,32 +1,29 @@
 <section id="bordered-pulled">
-  <h2 class="page-header">Bordered & Pulled Icons</h2>
+  <h2 class="page-header">
+    Bordered &amp; Pulled Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3 col-sm-4">
       <p>
-        Use <code>icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
-        article graphics.
+        <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
+        &hellip;tomorrow we will run faster, stretch out our arms farther&hellip; And then one fine morning—
+        So we beat on, boats against the current, borne back ceaselessly into the past.
       </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>
-{% highlight html %}
-<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
-Use a few of the new styles together ... lots of new possibilities.
-{% endhighlight %}
-      <div class="well well-large well-transparent clearfix">
-        <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>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code> for easy pull quotes or
+        article icons.
+      </p>
 {% highlight html %}
-<i class="icon-flag icon-4x pull-left icon-border"></i>
-Use a few of the new styles together ... lots of new possibilities.
+<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
+...tomorrow we will run faster, stretch out our arms farther...
+And then one fine morning— So we beat on, boats against the
+current, borne back ceaselessly into the past.
 {% endhighlight %}
     </div>
   </div>
diff --git a/library/font_awesome/src/_includes/examples/bulleted-lists.html b/library/font_awesome/src/_includes/examples/bulleted-lists.html
deleted file mode 100644
index 73db34e47..000000000
--- a/library/font_awesome/src/_includes/examples/bulleted-lists.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<section id="bulleted-lists">
-  <h2 class="page-header">Bulleted Lists</h2>
-  <div class="row">
-    <div class="span12">
-    </div>
-    <div class="span3">
-      <ul class="icons-ul">
-        <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
-        <li><i class="icon-li icon-ok"></i>Buttons</li>
-        <li><i class="icon-li icon-ok"></i>Button groups</li>
-        <li><i class="icon-li icon-ok"></i>Navigation</li>
-        <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
-        <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
-      </ul>
-    </div>
-    <div class="span9">
-      <p>Easily replace individual bullets.</p>
-{% highlight html %}
-<ul class="icons-ul">
-  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
-  <li><i class="icon-li icon-ok"></i>Buttons</li>
-  <li><i class="icon-li icon-ok"></i>Button groups</li>
-  <li><i class="icon-li icon-ok"></i>Navigation</li>
-  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
-  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
-</ul>
-{% endhighlight %}
-      <div class="alert alert-info"><i class="icon-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div>
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/button-dropdowns.html b/library/font_awesome/src/_includes/examples/button-dropdowns.html
deleted file mode 100644
index 201eb1cd4..000000000
--- a/library/font_awesome/src/_includes/examples/button-dropdowns.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<section id="button-dropdowns">
-  <h2 class="page-header">Button Dropdowns</h2>
-  <div class="row">
-    <div class="span3">
-      <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-fixed-width icon-pencil"></i> Edit</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
-          <li><a href="#"><i class="icon-fixed-width 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>
-    <div class="span9">
-{% highlight html %}
-<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-fixed-width icon-pencil"></i> Edit</a></li>
-    <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
-    <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></i> Ban</a></li>
-    <li class="divider"></li>
-    <li><a href="#"><i class="i"></i> Make admin</a></li>
-  </ul>
-</div>
-{% endhighlight %}
-      <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>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/button-groups.html b/library/font_awesome/src/_includes/examples/button-groups.html
deleted file mode 100644
index ce4892309..000000000
--- a/library/font_awesome/src/_includes/examples/button-groups.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<section id="button-groups">
-  <h2 class="page-header">Button Groups</h2>
-  <div class="row">
-    <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">
-{% highlight html %}
-<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>
-{% endhighlight %}
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/buttons.html b/library/font_awesome/src/_includes/examples/buttons.html
deleted file mode 100644
index b8d147c07..000000000
--- a/library/font_awesome/src/_includes/examples/buttons.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<section id="buttons">
-  <h2 class="page-header">Buttons</h2>
-  <div class="row">
-    <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 {{ site.fontawesome.version }}</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>
-{% highlight html %}
-<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 {{ site.fontawesome.version }}</a>
-<a class="btn btn-primary" href="#">
-  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
-{% endhighlight %}
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/custom.html b/library/font_awesome/src/_includes/examples/custom.html
index dfad1900c..2de7ad7ab 100644
--- a/library/font_awesome/src/_includes/examples/custom.html
+++ b/library/font_awesome/src/_includes/examples/custom.html
@@ -1,10 +1,10 @@
 <section id="custom">
   <h2 class="page-header">Custom CSS</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3 col-sm-4">
       <p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
     </div>
-    <div class="span9">
+    <div class="col-md-9 col-sm-8">
       <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">
diff --git a/library/font_awesome/src/_includes/examples/fixed-width.html b/library/font_awesome/src/_includes/examples/fixed-width.html
new file mode 100644
index 000000000..845a79609
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/fixed-width.html
@@ -0,0 +1,33 @@
+<section id="fixed-width">
+  <h2 class="page-header">
+    Fixed Width Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_fixed-width.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <div class="list-group">
+        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidde="true"></i>&nbsp; Home</a>
+        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidde="true"></i>&nbsp; Library</a>
+        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidde="true"></i>&nbsp; Applications</a>
+        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidde="true"></i>&nbsp; Settings</a>
+      </div>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        Use <code>fa-fw</code> to set icons at a fixed width. Great to use when different icon widths throw off alignment.
+        Especially useful in things like nav lists &amp; list groups.
+      </p>
+{% highlight html %}
+<div class="list-group">
+  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
+  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
+  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
+  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
+</div>
+{% endhighlight %}
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/form-inputs.html b/library/font_awesome/src/_includes/examples/form-inputs.html
deleted file mode 100644
index dcb39a8f2..000000000
--- a/library/font_awesome/src/_includes/examples/form-inputs.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<section id="form-inputs">
-  <h2 class="page-header">Prepended & Appended Form Inputs</h2>
-  <div class="row">
-    <div class="span3">
-      <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>
-    </div>
-    <div class="span9">
-{% highlight html %}
-<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>
-{% endhighlight %}
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/inline-icons.html b/library/font_awesome/src/_includes/examples/inline-icons.html
deleted file mode 100644
index 3965e7c2a..000000000
--- a/library/font_awesome/src/_includes/examples/inline-icons.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<section id="inline-icons">
-  <h2 class="page-header">Inline Icons</h2>
-  <div class="row">
-    <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>
-{% highlight html %}
-<i class="icon-camera-retro"></i> icon-camera-retro
-{% endhighlight %}
-      <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div>
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/larger-icons.html b/library/font_awesome/src/_includes/examples/larger-icons.html
deleted file mode 100644
index 95f1ee13b..000000000
--- a/library/font_awesome/src/_includes/examples/larger-icons.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<section id="larger-icons">
-  <h2 class="page-header">Larger Icons</h2>
-  <div class="row">
-    <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>
-{% highlight html %}
-<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>
-{% endhighlight %}
-      <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>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/larger.html b/library/font_awesome/src/_includes/examples/larger.html
new file mode 100644
index 000000000..f10c7188a
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/larger.html
@@ -0,0 +1,40 @@
+<section id="larger">
+  <h2 class="page-header">
+    Larger Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/larger.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_larger.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <p><i class="fa fa-camera-retro fa-lg" aria-hidden="true"></i> fa-lg</p>
+      <p><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i> fa-2x</p>
+      <p><i class="fa fa-camera-retro fa-3x" aria-hidden="true"></i> fa-3x</p>
+      <p><i class="fa fa-camera-retro fa-4x" aria-hidden="true"></i> fa-4x</p>
+      <p><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i> fa-5x</p>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
+        <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
+      </p>
+{% highlight html %}
+<i class="fa fa-camera-retro fa-lg"></i> fa-lg
+<i class="fa fa-camera-retro fa-2x"></i> fa-2x
+<i class="fa fa-camera-retro fa-3x"></i> fa-3x
+<i class="fa fa-camera-retro fa-4x"></i> fa-4x
+<i class="fa fa-camera-retro fa-5x"></i> fa-5x
+{% endhighlight %}
+      <div class="alert alert-success">
+        <ul class="fa-ul">
+          <li>
+            <i class="fa fa-exclamation-triangle fa-li fa-lg"></i>
+            If your icons are getting chopped off on top and bottom, make sure you have
+            sufficient line-height.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/list.html b/library/font_awesome/src/_includes/examples/list.html
new file mode 100644
index 000000000..a708902be
--- /dev/null
+++ b/library/font_awesome/src/_includes/examples/list.html
@@ -0,0 +1,30 @@
+<section id="list">
+  <h2 class="page-header">
+    List Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/list.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_list.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <ul class="fa-ul">
+        <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
+        <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
+        <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
+        <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
+      </ul>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
+{% highlight html %}
+<ul class="fa-ul">
+  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
+  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
+  <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
+  <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
+</ul>
+{% endhighlight %}
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/examples/navigation.html b/library/font_awesome/src/_includes/examples/navigation.html
deleted file mode 100644
index 850e64442..000000000
--- a/library/font_awesome/src/_includes/examples/navigation.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<section id="navigation">
-  <h2 class="page-header">Navigation</h2>
-  <div class="row">
-    <div class="span3">
-      <div class="well" style="padding: 8px 0;">
-        <ul class="nav nav-list">
-          <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
-          <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li>
-          <li><a href="#"><i class="icon-fixed-width 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>
-{% highlight html %}
-<ul class="nav nav-list">
-  <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
-  <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li>
-  <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li>
-  <li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Settings</a></li>
-</ul>
-{% endhighlight %}
-    </div>
-  </div>
-</section>
diff --git a/library/font_awesome/src/_includes/examples/new.html b/library/font_awesome/src/_includes/examples/new.html
deleted file mode 100644
index 8393f7d36..000000000
--- a/library/font_awesome/src/_includes/examples/new.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
-  <h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
-  <div class="row">
-    <div class="span4">
-      <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
-      <div class="well well-transparent">
-        <i class="icon-shield"></i>&nbsp; normal<br>
-        <i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-        <i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-        <i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-        <i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-        <i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
-      </div>
-    </div>
-    <div class="span4">
-      <h4><a href="#stacked">Stacked Icons</a></h4>
-      <div class="well well-transparent stacked">
-        <span class="icon-stack">
-          <i class="icon-check-empty icon-stack-base"></i>
-          <i class="icon-twitter"></i>
-        </span>
-        icon-twitter on icon-check-empty<br>
-        <span class="icon-stack">
-          <i class="icon-circle icon-stack-base"></i>
-          <i class="icon-flag icon-light"></i>
-        </span>
-        icon-flag on icon-circle<br>
-        <span class="icon-stack">
-          <i class="icon-sign-blank icon-stack-base"></i>
-          <i class="icon-terminal icon-light"></i>
-        </span>
-        icon-terminal on icon-sign-blank
-      </div>
-    </div>
-    <div class="span4">
-      <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
-      <div class="well well-transparent">
-        <ul class="icons-ul">
-          <li><i class="icon-li icon-chevron-sign-right"></i>New bulleted lists</li>
-          <li><i class="icon-li icon-bullseye"></i>Fix some old bugs</li>
-          <li><i class="icon-li icon-play-sign"></i>And deal with arbitrary</li>
-          <li><i class="icon-li icon-ok-sign"></i>Font sizes better</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</{% if page.navbar_active == "examples" %}div{% else %}section{% endif %}>
diff --git a/library/font_awesome/src/_includes/examples/rotated-flipped.html b/library/font_awesome/src/_includes/examples/rotated-flipped.html
index cf061cd59..4c5b437f1 100644
--- a/library/font_awesome/src/_includes/examples/rotated-flipped.html
+++ b/library/font_awesome/src/_includes/examples/rotated-flipped.html
@@ -1,29 +1,34 @@
 <section id="rotated-flipped">
-  <h2 class="page-header">Rotated &amp; Flipped</h2>
+  <h2 class="page-header">
+    Rotated &amp; Flipped
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
+    </div>
+  </h2>
   <div class="row">
-    <div class="span3">
-      A set of classes that can be used to arbitrarily rotate and flip icons.
+    <div class="col-md-3 col-sm-4">
+      <p style="font-size: 18px;">
+        <i class="fa fa-shield" aria-hidden="true"></i>&nbsp; normal<br>
+        <i class="fa fa-shield fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90<br>
+        <i class="fa fa-shield fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180<br>
+        <i class="fa fa-shield fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270<br>
+        <i class="fa fa-shield fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
+        <i class="fa fa-shield fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical
+      </p>
     </div>
-    <div class="span9">
-      <div class="well well-large well-transparent lead">
-        <i class="icon-shield"></i>&nbsp; normal<br>
-        <i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-        <i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-        <i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-        <i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-        <i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
-      </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
+      </p>
 {% highlight html %}
-<i class="icon-shield"></i>&nbsp; normal<br>
-<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
+<i class="fa fa-shield"></i> normal<br>
+<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
+<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
+<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
+<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
+<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
 {% endhighlight %}
-      <p class="alert alert-info">
-        <i class="icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7.
-      </p>
     </div>
   </div>
 </section>
diff --git a/library/font_awesome/src/_includes/examples/stacked.html b/library/font_awesome/src/_includes/examples/stacked.html
index 3e7240c12..505ed2edf 100644
--- a/library/font_awesome/src/_includes/examples/stacked.html
+++ b/library/font_awesome/src/_includes/examples/stacked.html
@@ -1,54 +1,64 @@
 <section id="stacked">
-  <h2 class="page-header">Stacked Icons</h2>
-  <div class="row">
-    <div class="span3">
-      A method for easily stacking multiple icons. Use the <code>icon-stack</code> class on the parent and
-      <code>icon-stack-base</code> for the bottom icon.
+  <h2 class="page-header">
+    Stacked Icons
+    <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/stacked.less" class="text-muted padding-right">View LESS</a>
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_stacked.scss" class="text-muted">View SASS</a>
     </div>
-    <div class="span9">
-      <div class="well well-large well-transparent lead">
-        <span class="icon-stack">
-          <i class="icon-check-empty icon-stack-base"></i>
-          <i class="icon-twitter"></i>
+  </h2>
+  <div class="row">
+    <div class="col-md-3 col-sm-4">
+      <div class="margin-bottom">
+        <span class="fa-stack fa-lg" aria-hidden="true">
+          <i class="fa fa-square-o fa-stack-2x"></i>
+          <i class="fa fa-twitter fa-stack-1x"></i>
         </span>
-        icon-twitter on icon-check-empty<br>
-        <span class="icon-stack">
-          <i class="icon-circle icon-stack-base"></i>
-          <i class="icon-flag icon-light"></i>
+        fa-twitter on fa-square-o<br>
+        <span class="fa-stack fa-lg" aria-hidden="true">
+          <i class="fa fa-circle fa-stack-2x"></i>
+          <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
         </span>
-        icon-flag on icon-circle<br>
-        <span class="icon-stack">
-          <i class="icon-sign-blank icon-stack-base"></i>
-          <i class="icon-terminal icon-light"></i>
+        fa-flag on fa-circle<br>
+        <span class="fa-stack fa-lg" aria-hidden="true">
+          <i class="fa fa-square fa-stack-2x"></i>
+          <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
         </span>
-        icon-terminal on icon-sign-blank<br>
-        <span class="icon-stack">
-          <i class="icon-camera"></i>
-          <i class="icon-ban-circle icon-stack-base text-error"></i>
+        fa-terminal on fa-square<br>
+        <span class="fa-stack fa-lg" aria-hidden="true">
+          <i class="fa fa-camera fa-stack-1x"></i>
+          <i class="fa fa-ban fa-stack-2x text-danger"></i>
         </span>
-        icon-camera on icon-ban-circle
+        fa-ban on fa-camera
       </div>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
+        for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
+        can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
+        to get further control of sizing.
+      </p>
 {% highlight html %}
-<span class="icon-stack">
-  <i class="icon-check-empty icon-stack-base"></i>
-  <i class="icon-twitter"></i>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-square-o fa-stack-2x"></i>
+  <i class="fa fa-twitter fa-stack-1x"></i>
 </span>
-icon-twitter on icon-check-empty<br>
-<span class="icon-stack">
-  <i class="icon-circle icon-stack-base"></i>
-  <i class="icon-flag icon-light"></i>
+fa-twitter on fa-square-o<br>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
 </span>
-icon-flag on icon-circle<br>
-<span class="icon-stack">
-  <i class="icon-sign-blank icon-stack-base"></i>
-  <i class="icon-terminal icon-light"></i>
+fa-flag on fa-circle<br>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-square fa-stack-2x"></i>
+  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
 </span>
-icon-terminal on icon-sign-blank<br>
-<span class="icon-stack">
-  <i class="icon-camera"></i>
-  <i class="icon-ban-circle icon-stack-base text-error"></i>
+fa-terminal on fa-square<br>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-camera fa-stack-1x"></i>
+  <i class="fa fa-ban fa-stack-2x text-danger"></i>
 </span>
-icon-camera on icon-ban-circle
+fa-ban on fa-camera
 {% endhighlight %}
     </div>
   </div>
diff --git a/library/font_awesome/src/_includes/footer.html b/library/font_awesome/src/_includes/footer.html
index 186b1524d..e299adf2e 100644
--- a/library/font_awesome/src/_includes/footer.html
+++ b/library/font_awesome/src/_includes/footer.html
@@ -1,23 +1,41 @@
-<footer class="footer hidden-print">
+<footer id="footer" class="footer hidden-print">
   <div class="container text-center">
+    <div id="bsap_1298241" class="bsarocks bsap_b1146e3f9fa32a794fc6d2c7be47ece8">
+      <a href="https://www.approveme.me/?utm_source=fontawesome.io&utm_medium=banner&utm_term=Sign%20Documents%20using%20Your%20Wordpress&utm_content=220x65-1e-try-a-free-demo-now_2x_bw&utm_campaign=fontawesome"
+          title="Sign Documents using Your Wordpress" target="_blank" rel="nofollow"
+          onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'approve.me']);">
+        <img src="{{ page.relative_path }}assets/img/logo-approveme.png" width="220" height="65" alt="">
+      </a>
+      <a href="http://www.wpbeginner.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome"
+          title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
+          onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'wpbeginner.com']);">
+        <img src="{{ page.relative_path }}assets/img/logo-wpbeginner.png" width="220" height="65" alt="">
+      </a>
+      <a href="https://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome"
+          title="Premium Wordpress Themes" target="_blank" rel="nofollow"
+          onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'themeisle.com']);">
+        <img src="{{ page.relative_path }}assets/img/logo-themeisle.png" width="220" height="65" alt="">
+      </a>
+    </div>
     <div>
-      <i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }}
-      <span class="hidden-phone">&middot;</span><br class="visible-phone">
-      Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome {{ site.fontawesome.version }}
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
+      Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
     </div>
     <div>
       Font Awesome licensed under <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.version }}</a>
-      <span class="hidden-phone">&middot;</span><br class="visible-phone">
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
       Code licensed under <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.version }}</a>
-      <span class="hidden-phone hidden-tablet">&middot;</span><br class="visible-phone visible-tablet">
+      <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
       Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a>
     </div>
     <div>
-      Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
+      Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378/"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
     </div>
     <div class="project">
       <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> &middot;
-      <a href="{{ site.fontawesome.github.url }}/issues">Issues</a>
+      <a href="{{ site.fontawesome.github.url }}/issues">Issues</a> &middot;
+      <a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a>
     </div>
   </div>
 </footer>
diff --git a/library/font_awesome/src/_includes/get-started.html b/library/font_awesome/src/_includes/get-started.html
deleted file mode 100644
index 34b970fd4..000000000
--- a/library/font_awesome/src/_includes/get-started.html
+++ /dev/null
@@ -1,105 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and
-  customize the LESS yourself! Font Awesome even plays nicely with
-  <a href="{{ site.bootstrap.url }}">Bootstrap</a>!
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-<div id="bootstrapcdn">
-  <h2 class="page-header">EASIEST: <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a></h2>
-  <p>Add Font Awesome + Bootstrap into your website with two lines of code. You don't even have to download or install anything!</p>
-  <ol>
-    <li>
-      Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
-{% highlight html %}
-<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/{{ site.bootstrap.version }}/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
-<link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet">
-{% endhighlight %}
-      <div class="alert alert-info margin-top">
-        <i class="icon-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line.
-      </div>
-    </li>
-    <li>
-      Pat yourself on the back for your scalable-vector-icons-on-the-website
-      <a href="http://37signals.com/svn/posts/312-lingo-judo">judo solution</a> in two lines of code.
-    </li>
-    <li>
-      Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!
-    </li>
-  </ol>
-</div>
-
-<section id="default-css">
-  <h2 class="page-header">EASY: Default CSS</h2>
-  <p>Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.</p>
-  <ol>
-    <li>Copy the <code>font-awesome</code> directory into your project.</li>
-    <li>
-      In the <code>&lt;head&gt;</code> of your html, reference the location to your font-awesome.min.css.
-{% highlight html %}
-<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
-<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
-{% endhighlight %}
-    </li>
-    <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
-  </ol>
-</section>
-
-<section id="custom-less">
-  <h2 class="page-header">PRO: Custom LESS</h2>
-  <p>Use this method to customize Font Awesome and Bootstrap {{ site.bootstrap.version }} using LESS.</p>
-  <ol>
-    <li>Copy the <code>font-awesome</code> directory into your project.</li>
-    <li>Open your project's bootstrap/bootstrap.less and replace
-{% highlight html %}
-@import "sprites.less";
-{% endhighlight %}
-      with
-{% highlight html %}
-@import "path/to/font-awesome/less/font-awesome.less";
-{% endhighlight %}
-    </li>
-    <li>
-      Open your project's font-awesome/variables.less and edit the <code>@FontAwesomePath</code> variable to point to your font directory.
-{% highlight html %}
-@FontAwesomePath:   "../font";
-{% endhighlight %}
-      <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 <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
-  </ol>
-</section>
-
-<section id="not-using-bootstrap">
-  <h2 class="page-header">Not using Bootstrap?</h2>
-  <p>Font Awesome works just as well without Bootstrap.</p>
-  <ol>
-    <li>Copy the <code>font-awesome</code> directory into your project.</li>
-    <li>Follow the above directions and skip the Bootstrap parts.</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 <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
-  </ol>
-</section>
-
-<section class="need-ie7">
-  <h2 class="page-header">Need IE7 Support?</h2>
-  <p>Font Awesome supports IE7. If you need it, you have my condolences.</p>
-  <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.
-{% highlight html %}
-<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
-<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
-<!--[if IE 7]>
-  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
-<![endif]-->
-{% endhighlight %}
-    </li>
-    <li>Go complain to whoever decided your project needs IE7 support.</li>
-  </ol>
-</section>
diff --git a/library/font_awesome/src/_includes/icons.html b/library/font_awesome/src/_includes/icons.html
deleted file mode 100644
index aeb802805..000000000
--- a/library/font_awesome/src/_includes/icons.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
-  Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
-  <!--The ever-expanding list of Font Awesome {{ site.fontawesome.version }} icons.-->
-  Need vectors or want to use on the desktop? Check the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-{% include icons/new.html %}
-{% include icons/web-application.html %}
-{% include icons/currency.html %}
-{% include icons/text-editor.html %}
-{% include icons/directional.html %}
-{% include icons/video-player.html %}
-{% include icons/brand.html %}
-{% include icons/medical.html %}
diff --git a/library/font_awesome/src/_includes/icons/accessibility.html b/library/font_awesome/src/_includes/icons/accessibility.html
new file mode 100644
index 000000000..14cd92e5c
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/accessibility.html
@@ -0,0 +1,12 @@
+<section id="accessibility">
+  <h2 class="page-header">Accessibility Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_currency = icons | expand_aliases | category:"Accessibility Icons" | sort_by:'class' %}
+
+    {% for icon in icons_currency %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/brand.html b/library/font_awesome/src/_includes/icons/brand.html
index feb6032e8..451f147d3 100644
--- a/library/font_awesome/src/_includes/icons/brand.html
+++ b/library/font_awesome/src/_includes/icons/brand.html
@@ -1,15 +1,19 @@
 <section id="brand">
   <h2 class="page-header">Brand Icons</h2>
 
-  <div class="alert alert-info">
-    {% include brand-license.html %}
+  <div class="alert alert-warning">
+    {% include brand-adblock-warning.html %}
   </div>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list margin-bottom-lg">
     {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
 
     {% for icon in icons_brand %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
+
+  <div class="alert alert-success">
+    {% include brand-license.html %}
+  </div>
 </section>
diff --git a/library/font_awesome/src/_includes/icons/chart.html b/library/font_awesome/src/_includes/icons/chart.html
new file mode 100644
index 000000000..f5cbc1cca
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/chart.html
@@ -0,0 +1,12 @@
+<section id="chart">
+  <h2 class="page-header">Chart Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
+
+    {% for icon in icons_chart %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/currency.html b/library/font_awesome/src/_includes/icons/currency.html
index c451d5211..bc9061513 100644
--- a/library/font_awesome/src/_includes/icons/currency.html
+++ b/library/font_awesome/src/_includes/icons/currency.html
@@ -1,11 +1,11 @@
 <section id="currency">
   <h2 class="page-header">Currency Icons</h2>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list">
     {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
 
     {% for icon in icons_currency %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/library/font_awesome/src/_includes/icons/directional.html b/library/font_awesome/src/_includes/icons/directional.html
index 6b4170a1b..d8f2a4c0e 100644
--- a/library/font_awesome/src/_includes/icons/directional.html
+++ b/library/font_awesome/src/_includes/icons/directional.html
@@ -1,11 +1,11 @@
 <section id="directional">
   <h2 class="page-header">Directional Icons</h2>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list">
     {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
 
     {% for icon in icons_directional %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/library/font_awesome/src/_includes/icons/file-type.html b/library/font_awesome/src/_includes/icons/file-type.html
new file mode 100644
index 000000000..290022be1
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/file-type.html
@@ -0,0 +1,12 @@
+<section id="file-type">
+  <h2 class="page-header">File Type Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}
+
+    {% for icon in icons_file_type %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/form-control.html b/library/font_awesome/src/_includes/icons/form-control.html
new file mode 100644
index 000000000..a8cac628a
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/form-control.html
@@ -0,0 +1,11 @@
+<section id="form-control">
+  <h2 class="page-header">Form Control Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}
+
+    {% for icon in icons_form_control %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/icons/gender.html b/library/font_awesome/src/_includes/icons/gender.html
new file mode 100644
index 000000000..1fbde026b
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/gender.html
@@ -0,0 +1,12 @@
+<section id="gender">
+  <h2 class="page-header">Gender Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
+
+    {% for icon in icons_gender %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/hand.html b/library/font_awesome/src/_includes/icons/hand.html
new file mode 100644
index 000000000..4104af2e0
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/hand.html
@@ -0,0 +1,12 @@
+<section id="hand">
+  <h2 class="page-header">Hand Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}
+
+    {% for icon in icons_hand %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/medical.html b/library/font_awesome/src/_includes/icons/medical.html
index 7d4cd7f97..23364382a 100644
--- a/library/font_awesome/src/_includes/icons/medical.html
+++ b/library/font_awesome/src/_includes/icons/medical.html
@@ -1,11 +1,11 @@
 <section id="medical">
   <h2 class="page-header">Medical Icons</h2>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list">
     {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
 
     {% for icon in icons_medical %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/library/font_awesome/src/_includes/icons/new.html b/library/font_awesome/src/_includes/icons/new.html
index 52c5e3fa6..91a10b3e8 100644
--- a/library/font_awesome/src/_includes/icons/new.html
+++ b/library/font_awesome/src/_includes/icons/new.html
@@ -1,5 +1,5 @@
-<{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="new">
-  <h2 class="page-header">New Icons in {{ site.fontawesome.minor_version }}</h2>
+<section id="new">
+  <h2 class="page-header">{{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h2>
   {% if page.navbar_active != "icons" %}
     <div class="margin-botom-large">
       You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
@@ -7,12 +7,12 @@
     </div>
   {% endif %}
 
-  <div class="row the-icons">
-    {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
+  <div class="row fontawesome-icon-list">
+    {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}
 
     {% for icon in icons_new %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
-</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>
+</section>
diff --git a/library/font_awesome/src/_includes/icons/payment.html b/library/font_awesome/src/_includes/icons/payment.html
new file mode 100644
index 000000000..03a636465
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/payment.html
@@ -0,0 +1,12 @@
+<section id="payment">
+  <h2 class="page-header">Payment Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
+
+    {% for icon in icons_payment %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/spinner.html b/library/font_awesome/src/_includes/icons/spinner.html
new file mode 100644
index 000000000..ef9d68e8b
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/spinner.html
@@ -0,0 +1,22 @@
+<section id="spinner">
+  <h2 class="page-header">Spinner Icons</h2>
+
+  <div class="alert alert-success">
+    <ul class="fa-ul">
+      <li>
+        <i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
+        <strong class="sr-only">Note:</strong>
+        These icons work great with the <code>fa-spin</code> class. Check out the
+        <a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
+      </li>
+    </ul>
+  </div>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
+
+    {% for icon in icons_spinner %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/icons/text-editor.html b/library/font_awesome/src/_includes/icons/text-editor.html
index 2c2d4955c..05d33cb2b 100644
--- a/library/font_awesome/src/_includes/icons/text-editor.html
+++ b/library/font_awesome/src/_includes/icons/text-editor.html
@@ -1,11 +1,11 @@
 <section id="text-editor">
   <h2 class="page-header">Text Editor Icons</h2>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list">
     {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
 
     {% for icon in icons_text_editor %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/library/font_awesome/src/_includes/icons/transportation.html b/library/font_awesome/src/_includes/icons/transportation.html
new file mode 100644
index 000000000..af2fd7e7f
--- /dev/null
+++ b/library/font_awesome/src/_includes/icons/transportation.html
@@ -0,0 +1,12 @@
+<section id="transportation">
+  <h2 class="page-header">Transportation Icons</h2>
+
+  <div class="row fontawesome-icon-list">
+    {% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
+
+    {% for icon in icons_transportation %}
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+    {% endfor %}
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/icons/video-player.html b/library/font_awesome/src/_includes/icons/video-player.html
index 5fcbe133b..4a57612d1 100644
--- a/library/font_awesome/src/_includes/icons/video-player.html
+++ b/library/font_awesome/src/_includes/icons/video-player.html
@@ -1,11 +1,11 @@
 <section id="video-player">
   <h2 class="page-header">Video Player Icons</h2>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list">
     {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
 
     {% for icon in icons_video_player %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/library/font_awesome/src/_includes/icons/web-application.html b/library/font_awesome/src/_includes/icons/web-application.html
index f70d727f7..6e737e6cd 100644
--- a/library/font_awesome/src/_includes/icons/web-application.html
+++ b/library/font_awesome/src/_includes/icons/web-application.html
@@ -1,11 +1,11 @@
 <section id="web-application">
   <h2 class="page-header">Web Application Icons</h2>
 
-  <div class="row the-icons">
+  <div class="row fontawesome-icon-list">
     {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
 
     {% for icon in icons_web_application %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/library/font_awesome/src/_includes/jumbotron-carousel.html b/library/font_awesome/src/_includes/jumbotron-carousel.html
new file mode 100644
index 000000000..1f2b211f0
--- /dev/null
+++ b/library/font_awesome/src/_includes/jumbotron-carousel.html
@@ -0,0 +1,57 @@
+<div class="jumbotron jumbotron-carousel hidden-print">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8 col-sm-8 text-center">
+        <h1>Font Awesome</h1>
+        <p>The iconic font and CSS toolkit</p>
+        <div class="actions">
+          <a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
+             onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
+            <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
+            Download
+          </a>
+        </div>
+        <div class="shameless-self-promotion">
+          Version {{ site.fontawesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+          <a href="{{ site.fontawesome.github.url }}"
+             onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
+            GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+          <a href="{{ page.relative_path }}3.2.1">Old 3.2.1 Docs</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
+          Created by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
+        </div>
+      </div>
+      <div class="col-md-4 col-sm-4">
+        <div id="icon-carousel" class="carousel slide">
+          <!-- Carousel items -->
+          <div class="carousel-inner">
+            <div class="active item"><div><i class="fa fa-flag" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
+            <div class="item"><div><i class="fa fa-universal-access" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
+            <div class="item"><div><i class="fa fa-fort-awesome" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
+            <div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div>
+            <div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div>
+            <div class="item"><div><i class="fa fa-envelope" aria-hidden="true"></i><span class="sr-only">envelope icon</span></div></div>
+            <div class="item"><div><i class="fa fa-send-o" aria-hidden="true"></i><span class="sr-only">send icon</span></div></div>
+            <div class="item"><div><i class="fa fa-book" aria-hidden="true"></i><span class="sr-only">book icon</span></div></div>
+            <div class="item"><div><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">fighter jet icon</span></div></div>
+            <div class="item"><div><i class="fa fa-beer" aria-hidden="true"></i><span class="sr-only">beer icon</span></div></div>
+            <div class="item"><div><i class="fa fa-heart-o" aria-hidden="true"></i><span class="sr-only">heart icon</span></div></div>
+            <div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
+            <div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
+          </div>
+          <!-- Carousel nav -->
+          <a class="carousel-control left" href="#icon-carousel" data-slide="prev"
+             onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
+            <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a class="carousel-control right" href="#icon-carousel" data-slide="next"
+             onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
+            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
diff --git a/library/font_awesome/src/_includes/jumbotron-slider.html b/library/font_awesome/src/_includes/jumbotron-slider.html
deleted file mode 100644
index 362eeac70..000000000
--- a/library/font_awesome/src/_includes/jumbotron-slider.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<div class="jumbotron jumbotron-index hidden-print">
-  <div class="container">
-    <div class="row">
-      <div class="span8">
-        <div class="hero-content">
-          <h1>Font Awesome</h1>
-          <p>The iconic font designed for Bootstrap</p>
-          <div class="actions">
-            <a class="btn btn-primary btn-large" href="{{ page.relative_path }}assets/font-awesome.zip"
-               onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);">
-              <i class="icon-download-alt icon-large"></i>&nbsp;&nbsp;
-              Download
-            </a>
-          </div>
-          <div class="shameless-self-promotion">
-            <a href="{{ site.fontawesome.github.url }}"
-               onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'View Project on GitHub']);">
-              GitHub Project</a> &nbsp;&nbsp;&middot;&nbsp;&nbsp;
-            Version {{ site.fontawesome.version }} &nbsp;&nbsp;&middot;&nbsp;&nbsp;
-            Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
-          </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-compass"></i></div></div>
-            <div class="item"><div><i class="icon-rocket"></i></div></div>
-            <div class="item"><div><i class="icon-shield"></i></div></div>
-            <div class="item"><div><i class="icon-star-half-empty"></i></div></div>
-            <div class="item"><div><i class="icon-envelope-alt"></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-beer"></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-circle-arrow-left"></i></a>
-          <a class="carousel-control right" href="#iconCarousel" data-slide="next"
-             onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
-            <i class="icon-circle-arrow-right"></i></a>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</div>
diff --git a/library/font_awesome/src/_includes/jumbotron.html b/library/font_awesome/src/_includes/jumbotron.html
index 747b32ded..93920f7a7 100644
--- a/library/font_awesome/src/_includes/jumbotron.html
+++ b/library/font_awesome/src/_includes/jumbotron.html
@@ -1,6 +1,19 @@
 <div class="jumbotron jumbotron-ad hidden-print">
   <div class="container">
+
+    {% if page.in_page_nav %}
+    <div class="col-md-9">
+      <h1>{{ jumbotron_h1 }}</h1>
+      <p>{{ jumbotron_p }}</p>
+    </div>
+
+    <div class="col-md-3">
+      {{ jumbotron_nav }}
+    </div>
+    {% else %}
     <h1>{{ jumbotron_h1 }}</h1>
     <p>{{ jumbotron_p }}</p>
+    {% endif %}
   </div>
+
 </div>
diff --git a/library/font_awesome/src/_includes/license-code.less b/library/font_awesome/src/_includes/license-code.less
deleted file mode 100644
index 940e9a586..000000000
--- a/library/font_awesome/src/_includes/license-code.less
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- *  Font Awesome {{ site.fontawesome.version }}
- *  the iconic font designed for Bootstrap
- *  ------------------------------------------------------------------------------
- *  The full suite of pictographic icons, examples, and documentation can be
- *  found at {{ site.fontawesome.url }}.  Stay up to date on Twitter at
- *  http://twitter.com/{{ site.fontawesome.twitter }}.
- *
- *  License
- *  ------------------------------------------------------------------------------
- *  - The Font Awesome font is licensed under {{ site.fontawesome.license.font.version }} -
- *    {{ site.fontawesome.license.font.url }}
- *  - Font Awesome CSS, LESS, and SASS files are licensed under {{ site.fontawesome.license.code.version }} -
- *    {{ site.fontawesome.license.code.url }}
- *  - Font Awesome documentation licensed under {{ site.fontawesome.license.documentation.version }} -
- *    {{ site.fontawesome.license.documentation.url }}
- *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
- *    "Font Awesome by Dave Gandy - {{ site.fontawesome.url }}"
- *
- *  Author - Dave Gandy
- *  ------------------------------------------------------------------------------
- *  Email: {{ site.fontawesome.author.email }}
- *  Twitter: http://twitter.com/{{ site.fontawesome.author.twitter }}
- *  Work: {{ site.fontawesome.author.work.title }} @ {{ site.fontawesome.author.work.name }} - {{ site.fontawesome.author.work.url }}
- */
\ No newline at end of file
diff --git a/library/font_awesome/src/_includes/license.html b/library/font_awesome/src/_includes/license.html
deleted file mode 100644
index 8b2948095..000000000
--- a/library/font_awesome/src/_includes/license.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  Font Awesome is fully open source and is GPL compatible. You can use it for commercial projects, open source
-  projects, or really just about whatever you want.
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-<div>
-  <div class="alert alert-info">
-    <ul class="icons-ul margin-bottom-none">
-      <li>
-        <i class="icon-li icon-info-sign icon-large"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
-        "Font Awesome by Dave Gandy - http://fontawesome.io".
-      </li>
-    </ul>
-  </div>
-</div>
-
-<section>
-  <h2 class="page-header">Font License</h2>
-  <ul>
-    <li>
-      Applies to all desktop and webfont files in the following directory:
-      <code>font-awesome/font/</code>.
-    </li>
-    <li>License: {{ site.fontawesome.license.font.version }}</li>
-    <li>URL: <a href="{{ site.fontawesome.license.font.url }}">{{ site.fontawesome.license.font.url }}</a></li>
-  </ul>
-</section>
-
-<section>
-  <h2 class="page-header">Code License</h2>
-  <ul>
-    <li>
-      Applies to all CSS and LESS files in the following directories:
-      <code>font-awesome/css/</code> and
-      <code>font-awesome/less/</code>.
-    </li>
-    <li>License: {{ site.fontawesome.license.code.version }}</li>
-    <li>URL: <a href="{{ site.fontawesome.license.code.url }}">{{ site.fontawesome.license.code.url }}</a></li>
-  </ul>
-</section>
-
-<section>
-  <h2 class="page-header">Documentation License</h2>
-  <ul>
-    <li>Applies to all Font Awesome project files that are not a part of the Font or Code licenses.</li>
-    <li>License: {{ site.fontawesome.license.documentation.version }}</li>
-    <li>URL: <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.url }}</a></li>
-  </ul>
-</section>
-
-<section>
-  <h2 class="page-header">Brand Icons</h2>
-  {% include brand-license.html %}
-</section>
diff --git a/library/font_awesome/src/_includes/modals/download.html b/library/font_awesome/src/_includes/modals/download.html
new file mode 100644
index 000000000..a7105e69b
--- /dev/null
+++ b/library/font_awesome/src/_includes/modals/download.html
@@ -0,0 +1,58 @@
+<div class="modal fade" id="modal-download" tabindex="-1" role="dialog" aria-labelledby="modal-download-label"
+     xmlns="http://www.w3.org/1999/html">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
+        <h2 class="modal-title" id="modal-download-label">
+          <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
+          Download
+        </h2>
+      </div>
+      <div class="modal-body">
+        <div class="text-lg margin-bottom-lg">
+          Before you download, check out our latest project: Fort Awesome&mdash;
+        </div>
+
+        <div class="row">
+          <div class="col-md-6 col-sm-6 margin-bottom-lg">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Sets</h4>
+            Font Awesome not the right look? We've got the perfect icon set for your website!
+          </div>
+          <div class="col-md-6 col-sm-6 margin-bottom-lg">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Your Icons</h4>
+            Copy &amp; paste your own logo and icons directly into Fort Awesome. Easy peasy.
+          </div>
+          <div class="col-md-6 col-sm-6 margin-bottom-lg">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Fonts Too!</h4>
+            Subset and serve your typefaces too! We've got some great ones to start with.
+          </div>
+          <div class="col-md-6 col-sm-6 margin-bottom-lg">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Optimized</h4>
+            Subsetting your icons and typefaces often shrinks them by 95% or more!
+          </div>
+          <div class="col-md-6 col-sm-6 margin-bottom-lg">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Hosted</h4>
+            No more messing with files! Update and deploy your icons to our CDN.
+          </div>
+          <div class="col-md-6 col-sm-6 margin-bottom-lg">
+            <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Faster</h4>
+            Optimized and hosted means your icons and typefaces load much faster.
+          </div>
+        </div>
+
+        <a href="https://fortawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_5.0_update" class="btn btn-success btn-lg btn-block">
+          Take your icon game <br class="visible-xs" />to the next level with
+          <h2 class="margin-top-sm margin-bottom-sm hidden-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h2>
+          <h3 class="margin-top-sm margin-bottom-sm visible-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h3>
+        </a>
+        <div class="text-center margin-top-sm margin-bottom-sm">or</div>
+        <a class="btn btn-default btn-lg btn-block" href="{{ page.relative_path }}assets/font-awesome-{{ site.fontawesome.version }}.zip"
+           onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
+          No thanks, just download <br class="visible-xs" />Font Awesome
+        </a>
+
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/library/font_awesome/src/_includes/navbar.html b/library/font_awesome/src/_includes/navbar.html
index 99e1f5819..462da85c8 100644
--- a/library/font_awesome/src/_includes/navbar.html
+++ b/library/font_awesome/src/_includes/navbar.html
@@ -1,69 +1,122 @@
+<div class="collapse hidden-print" id="banner">
+  <div class="container">
+    <div class="message-container">
+      <div class="tagline">
+        <span id="rotating-message"></span>
+      </div>
+      <div class="action">
+        <a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="navbar navbar-org navbar-static-top">
+  <div class="container">
+    <ul class="nav navbar-nav navbar-right">
+      <li>
+        <a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
+          <i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp;
+          Fort Awesome
+        </a>
+      </li>
+      <li class="active">
+        <a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>&amp; CSS toolkit">
+          <i class="fas fas-flag-logo"></i>&nbsp;
+          Font Awesome</a>
+      </li>
+    </ul>
+    <div class="navbar-text navbar-right hide-xs">Build and serve a faster front end!</div>
+  </div>
+</div>
+
 <div class="navbar navbar-inverse navbar-static-top hidden-print">
-  <div class="navbar-inner">
-    <div class="container">
-      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </a>
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i>
+        <span class="sr-only">Toggle navigation</span>
+      </button>
+      <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
+    </div>
 
-      <a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a>
-      <div class="nav-collapse collapse">
-        <ul class="nav">
-          <li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
-          <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
-          <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
-          <li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "icons" %} active{% endif %}">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="icon-caret-down"></i>
-            </a>
-            <ul class="dropdown-menu pull-right">
-              <li><a href="{{ page.relative_path }}icons/"><i class="icon-flag icon-fixed-width"></i>&nbsp; Icons</a></li>
-              <li class="divider"></li>
-              <li><a href="{{ page.relative_path }}icons/#new"><i class="icon-shield icon-fixed-width"></i>&nbsp; New Icons in {{ site.fontawesome.version }}</a></li>
-              <li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i>&nbsp; Web Application Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i>&nbsp; Currency Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i>&nbsp; Text Editor Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i>&nbsp; Directional Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i>&nbsp; Video Player Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i>&nbsp; Brand Icons</a></li>
-              <li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i>&nbsp; Medical Icons</a></li>
-            </ul>
-          </li>
-          <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
-          <li class="dropdown dropdown-split-right hidden-phone{% if page.navbar_active == "examples" %} active{% endif %}">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="icon-caret-down"></i>
-            </a>
-            <ul class="dropdown-menu pull-right">
-              <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
-              <li class="divider"></li>
-              <li><a href="{{ page.relative_path }}examples/#new-styles">New Styles</a></li>
-              <li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
-              <li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
-              <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
-              <li><a href="{{ page.relative_path }}examples/#buttons">Buttons</a></li>
-              <li><a href="{{ page.relative_path }}examples/#button-groups">Button Groups</a></li>
-              <li><a href="{{ page.relative_path }}examples/#button-dropdowns">Button Dropdowns</a></li>
-              <li><a href="{{ page.relative_path }}examples/#bulleted-lists">Bulleted Lists</a></li>
-              <li><a href="{{ page.relative_path }}examples/#navigation">Navigation</a></li>
-              <li><a href="{{ page.relative_path }}examples/#form-inputs">Form Inputs</a></li>
-              <li><a href="{{ page.relative_path }}examples/#animated-spinner">Animated Spinner</a></li>
-              <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
-              <li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
-              <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
-            </ul>
-          </li>
-          <li{% if page.navbar_active == "whats-new" %} class="active"{% endif %}><a href="{{ page.relative_path }}whats-new/">
-          <span class="hidden-tablet">What's </span>New</a>
-          </li>
-          <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
-          <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
-        </ul>
-        <ul class="nav pull-right">
-          <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
-        </ul>
-      </div>
+    <div class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        <li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li>
+        <li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}">
+          <a href="{{ page.relative_path }}whats-new/">What's New</a>
+        </li>
+        <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
+          <a href="{{ page.relative_path }}whats-new/">New</a>
+        </li>
+
+        <li class="hidden-sm{% if page.navbar_active == "get-started" %} active{% endif %}"><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
+        <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "get-started" %} active{% endif %}">
+          <a href="{{ page.relative_path }}get-started/">Start</a>
+        </li>
+
+        <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
+        <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-caret-down" aria-hidden="true" title="Toggle dropdown menu"></i>
+            <span class="sr-only">Toggle dropdown menu</span>
+            <span class="toggle drop down"></span>
+          </a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
+            <li class="divider"></li>
+            <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
+            <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw" aria-hidden="true"></i>&nbsp; File Type Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i>&nbsp; Text Editor Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
+            <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
+          </ul>
+        </li>
+        <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
+        <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <i class="fa fa-caret-down" aria-hidden="true" title="Toggle dropdown menu"></i>
+            <span class="sr-only">Toggle dropdown menu</span>
+            <span class="toggle drop down"></span>
+          </a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
+            <li class="divider"></li>
+            <li><a href="{{ page.relative_path }}examples/#basic">Basic Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#animated">Animated Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#accessible">Accessibility-Minded</a></li>
+            <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
+            <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
+          </ul>
+        </li>
+        <li class="hidden-sm{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li>
+        <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/"><i class="fa fa-universal-access"></i></a></li>
+        <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
+        <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
+        <li class="hidden-sm hidden-xs"><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
+      </ul>
+
+      <ul class="nav navbar-nav navbar-right">
+        <li{% if page.navbar_active == "store" %} class="active"{% endif %}><a href="{{ page.relative_path }}store/"><i class="fa fa-shopping-cart margin-right-sm hidden-sm hidden-md"></i>Store</a></li>
+      </ul>
     </div>
   </div>
 </div>
diff --git a/library/font_awesome/src/_includes/new-features.html b/library/font_awesome/src/_includes/new-features.html
new file mode 100644
index 000000000..e8d46f1c1
--- /dev/null
+++ b/library/font_awesome/src/_includes/new-features.html
@@ -0,0 +1,29 @@
+
+<section id="whats-new" class="feature-list">
+  <div class="row">
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-file-text-o" aria-hidden="true"></i> Completely Rewritten</h4>
+      Everything re-written from the ground up for speed and simplicity.
+    </div>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-fighter-jet" aria-hidden="true"></i> CSS Best Practices</h4>
+      New icon base class allows simpler CSS, faster rendering, and easier control.
+    </div>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-terminal" aria-hidden="true"></i> New Icon Names</h4>
+      Icons have been renamed to improve consistency and predictability.
+    </div>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Bootstrap 3</h4>
+      Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
+    </div>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-code" aria-hidden="true"></i> Better Compatibility</h4>
+      Font Awesome is now more compatible with all web frameworks, including Foundation.
+    </div>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-rub" aria-hidden="true"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
+      Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
+    </div>
+  </div>
+</section>
diff --git a/library/font_awesome/src/_includes/new-naming.html b/library/font_awesome/src/_includes/new-naming.html
new file mode 100644
index 000000000..9777649a6
--- /dev/null
+++ b/library/font_awesome/src/_includes/new-naming.html
@@ -0,0 +1,157 @@
+<section id="new-naming">
+  <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
+  <p class="lead text-center alert alert-success">fa-[name]-[shape]-[o]-[direction]</p>
+  <p>
+    A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
+    of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
+    the names of variants.
+  </p>
+  <div class="row">
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">fa-*</h4>
+      <p class="margin-bottom-sm">Solid icons as the base variant</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-bookmark fa-li" aria-hidden="true"></i>
+          fa-bookmark
+        </li>
+        <li>
+          <i class="fa fa-comment fa-li" aria-hidden="true"></i>
+          fa-comment
+        </li>
+        <li>
+          <i class="fa fa-folder fa-li" aria-hidden="true"></i>
+          fa-folder
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-o</h4>
+      <p class="margin-bottom-sm">Outlined version of previous modifier</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-bookmark-o fa-li" aria-hidden="true"></i>
+          fa-bookmark-o
+        </li>
+        <li>
+          <i class="fa fa-comment-o fa-li" aria-hidden="true"></i>
+          fa-comment-o
+        </li>
+        <li>
+          <i class="fa fa-folder-o fa-li" aria-hidden="true"></i>
+          fa-folder-o
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-circle</h4>
+      <p class="margin-bottom-sm">Circle under previous modifier</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-check-circle fa-li" aria-hidden="true"></i>
+          fa-check-circle
+        </li>
+        <li>
+          <i class="fa fa-exclamation-circle fa-li" aria-hidden="true"></i>
+          fa-exclamation-circle
+        </li>
+        <li>
+          <i class="fa fa-plus-circle fa-li" aria-hidden="true"></i>
+          fa-plus-circle
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-square</h4>
+      <p class="margin-bottom-sm">Square under previous modifier</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-check-square fa-li" aria-hidden="true"></i>
+          fa-check-square
+        </li>
+        <li>
+          <i class="fa fa-twitter-square fa-li" aria-hidden="true"></i>
+          fa-twitter-square
+        </li>
+        <li>
+          <i class="fa fa-plus-square fa-li" aria-hidden="true"></i>
+          fa-plus-square
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
+      <p class="margin-bottom-sm">Directional modifier always at the end</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-arrow-right fa-li" aria-hidden="true"></i>
+          fa-arrow-right
+        </li>
+        <li>
+          <i class="fa fa-arrow-circle-right fa-li" aria-hidden="true"></i>
+          fa-arrow-circle-right
+        </li>
+        <li>
+          <i class="fa fa-angle-double-right fa-li" aria-hidden="true"></i>
+          fa-angle-double-right
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-alt</h4>
+      <p class="margin-bottom-sm">Alternative to the original</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-unlock-alt fa-li" aria-hidden="true"></i>
+          fa-unlock-alt
+        </li>
+        <li>
+          <i class="fa fa-list-alt fa-li" aria-hidden="true"></i>
+          fa-list-alt
+        </li>
+        <li>
+          <i class="fa fa-github-alt fa-li" aria-hidden="true"></i>
+          fa-github-alt
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-h, *-v</h4>
+      <p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-arrows-v fa-li" aria-hidden="true"></i>
+          fa-arrows-v
+        </li>
+        <li>
+          <i class="fa fa-arrows-h fa-li" aria-hidden="true"></i>
+          fa-arrows-h
+        </li>
+        <li>
+          <i class="fa fa-ellipsis-v fa-li" aria-hidden="true"></i>
+          fa-ellipsis-v
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">Combine 'em up&helip;</h4>
+      <p class="margin-bottom-sm">Consistent when strung together</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-arrow-circle-o-right fa-li" aria-hidden="true"></i>
+          fa-arrow-circle-o-right
+        </li>
+        <li>
+          <i class="fa fa-caret-square-o-right fa-li" aria-hidden="true"></i>
+          fa-caret-square-o-right
+        </li>
+        <li>
+          <i class="fa fa-hand-o-right fa-li" aria-hidden="true"></i>
+          fa-hand-o-right
+        </li>
+      </ul>
+    </div>
+
+  </div>
+
+</section>
diff --git a/library/font_awesome/src/_includes/new-upgrading.html b/library/font_awesome/src/_includes/new-upgrading.html
new file mode 100644
index 000000000..5d2d88d93
--- /dev/null
+++ b/library/font_awesome/src/_includes/new-upgrading.html
@@ -0,0 +1,10 @@
+<section id="new-upgrading">
+  <h2 class="page-header">Upgrading from 3.2.1?</h2>
+  <p>
+    For complete documentation of the syntax changes in {{ site.fontawesome.minor_version }}, check out the
+    <a href="{{ page.relative_path }}examples">examples</a>. For the changes to icon names,
+    <a href="https://twitter.com/gtagliala">@gtagliala</a> has put together a
+    <a href="{{ site.fontawesome.github.url }}/wiki/Upgrading-from-3.2.1-to-4">great wiki page</a> that
+    documents all the changes.
+  </p>
+</section>
diff --git a/library/font_awesome/src/_includes/products/camera-retro-tee.html b/library/font_awesome/src/_includes/products/camera-retro-tee.html
new file mode 100644
index 000000000..4f6ff4dc9
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/camera-retro-tee.html
@@ -0,0 +1,31 @@
+<a class="product" href="http://www.amazon.com/Camera-Retro-T-shirt-Small-Asphalt/dp/B01ELWGV14">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="camera-asphalt">
+      <img src="http://ecx.images-amazon.com/images/I/81mzUUTrfYL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="camera-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81AihmIpmUL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#camera-asphalt" data-toggle="tab"><span class="swatch swatch-asphalt" title="Asphalt"></span><span class="sr-only"> Asphalt</span></span></li>
+    <li><span data-target="#camera-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Camera Retro Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/classics-tee.html b/library/font_awesome/src/_includes/products/classics-tee.html
new file mode 100644
index 000000000..458f34ac2
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/classics-tee.html
@@ -0,0 +1,31 @@
+<a class="product" href="http://www.amazon.com/Mens-Classics-T-shirt-Small-Navy/dp/B01ELY5MT4">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="classics-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81nYbDVxo8L._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="classics-navy">
+      <img src="http://ecx.images-amazon.com/images/I/81MMb-JjRNL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#classics-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
+    <li><span data-target="#classics-navy" data-toggle="tab"><span class="swatch swatch-navy"></span><span class="sr-only" title="Navy"> Navy</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Classics Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/cta-suggestions.html b/library/font_awesome/src/_includes/products/cta-suggestions.html
new file mode 100644
index 000000000..09f703c0d
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/cta-suggestions.html
@@ -0,0 +1,20 @@
+<div class="product-cta">
+  <h3 class="cta-title">Have Ideas or Requests?</h3>
+
+  <div class="cta-content">
+    <p>
+      Got a great idea for a Font Awesome goodie or shirt? Don't see your favorite icon in a wear-able or share-able format?
+    </p>
+
+    <p>
+      We're all ears! Spend a few minutes and let us know what you'd want. If we end up using your idea, we'll send you a free copy.
+    </p>
+  </div>
+
+  <a class="btn btn-success btn-block btn-lg" href="mailto:suggestions@fortawesome.com?subject=I have a store idea!">Make a Store Suggestion!</a>
+
+
+  <p class="text-muted cta-fine-print">
+    Please note: While we appreciate all suggestions, not every idea might be right for Font Awesome nor could we physically make every idea.
+  </p>
+</div>
diff --git a/library/font_awesome/src/_includes/products/fa-ther-tee.html b/library/font_awesome/src/_includes/products/fa-ther-tee.html
new file mode 100644
index 000000000..7699d6bbf
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/fa-ther-tee.html
@@ -0,0 +1,29 @@
+<a class="product" href="http://www.amazon.com/Father-T-shirt-Small-Kelly-Green/dp/B01ELXTKW0">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="father-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81QUekkdt7L._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="father-navy">
+      <img src="http://ecx.images-amazon.com/images/I/817wsSl9ScL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#father-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
+    <li><span data-target="#father-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Fa-ther Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/green-logo-tee.html b/library/font_awesome/src/_includes/products/green-logo-tee.html
new file mode 100644
index 000000000..9226a5497
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/green-logo-tee.html
@@ -0,0 +1,31 @@
+<a class="product" href="http://www.amazon.com/Mens-Schmancy-Green-Small-Black/dp/B01ELYOYY8">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="green-logo-black">
+      <img src="http://ecx.images-amazon.com/images/I/715simtOAGL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="green-logo-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81Y2BFVgUAL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#green-logo-black" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
+    <li><span data-target="#green-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Green Logo Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/old-skool-tee.html b/library/font_awesome/src/_includes/products/old-skool-tee.html
new file mode 100644
index 000000000..4fff5b9f6
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/old-skool-tee.html
@@ -0,0 +1,31 @@
+<a class="product" href="http://www.amazon.com/Mens-Skool-T-shirt-Small-Navy/dp/B01ELWVHJ0">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="old-skool-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/812ghxTnRrL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="old-skool-navy">
+      <img src="http://ecx.images-amazon.com/images/I/819SDvnOv8L._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
+    <li><span data-target="#old-skool-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Old Skool Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/rock-paper-scissors-lizard-spock-tee.html b/library/font_awesome/src/_includes/products/rock-paper-scissors-lizard-spock-tee.html
new file mode 100644
index 000000000..294123171
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/rock-paper-scissors-lizard-spock-tee.html
@@ -0,0 +1,27 @@
+<a class="product" href="http://www.amazon.com/Paper-Scissors-Lizard-Spock-T-shirt/dp/B01ELX6N7U">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="rpsls-blue">
+      <img src="http://ecx.images-amazon.com/images/I/81AqlTK02KL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#rpsls-blue" data-toggle="tab"><span class="swatch swatch-royalblue" title="Royal Blue"></span><span class="sr-only"> Royal Blue</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Rock Paper Scissors Lizard Spock Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/space-shuttle-tee.html b/library/font_awesome/src/_includes/products/space-shuttle-tee.html
new file mode 100644
index 000000000..ddac55331
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/space-shuttle-tee.html
@@ -0,0 +1,31 @@
+<a class="product" href="http://www.amazon.com/Space-Shuttle-T-shirt-Small-Black/dp/B01ELRXO14">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="shuttle-black">
+      <img src="http://ecx.images-amazon.com/images/I/71e4BRlSOML._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="shuttle-navy">
+      <img src="http://ecx.images-amazon.com/images/I/81U%2BSAV23IL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#shuttle-black" data-toggle="tab"><span class="swatch swatch-black" title="Black"></span><span class="sr-only"> Black</span></span></li>
+    <li><span data-target="#shuttle-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Space Shuttle Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/products/white-logo-tee.html b/library/font_awesome/src/_includes/products/white-logo-tee.html
new file mode 100644
index 000000000..bd4ac26c3
--- /dev/null
+++ b/library/font_awesome/src/_includes/products/white-logo-tee.html
@@ -0,0 +1,35 @@
+<a class="product" href="http://www.amazon.com/Mens-Schmancy-White-T-shirt-Small/dp/B01ELYG428">
+  <div class="product-sizes">
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
+  </div>
+  <div class="tab-content">
+    <div class="tab-pane active" id="white-logo-kelly-green">
+      <img src="http://ecx.images-amazon.com/images/I/81fPcfH8KkL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="white-logo-navy">
+      <img src="http://ecx.images-amazon.com/images/I/81wt4C6gBlL._UX679_.jpg">
+    </div>
+    <div class="tab-pane" id="white-logo-silver">
+      <img src="http://ecx.images-amazon.com/images/I/71pEdMm86PL._UX679_.jpg">
+    </div>
+  </div>
+
+  <ul class="list-inline text-center margin-bottom-0">
+    <li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
+    <li><span data-target="#white-logo-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
+    <li><span data-target="#white-logo-silver" data-toggle="tab"><span class="swatch swatch-silver" title="Silver"></span><span class="sr-only"> Silver</span></span></li>
+  </ul>
+
+  <hr />
+
+  <div class="gg margin-bottom-sm">
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0">White Logo Tee</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
+  </div>
+  <div class="text-muted">
+    American Apparel Fine Jersey Short Sleeve T-Shirt
+  </div>
+</a>
diff --git a/library/font_awesome/src/_includes/stripe-ad.html b/library/font_awesome/src/_includes/stripe-ad.html
index 64a278609..8aa93e971 100644
--- a/library/font_awesome/src/_includes/stripe-ad.html
+++ b/library/font_awesome/src/_includes/stripe-ad.html
@@ -1,10 +1,6 @@
 <section class="hidden-print">
-  <div class="row stripe-ad">
-    <div class="span8">
-      {{ stripe_ad_content }}
-    </div>
-    <div class="span4">
-      {% include ads/carbon-light-horizontal.html %}
-    </div>
+  <div class="stripe-ad">
+    {% include ads/fusion.html %}
+    {{ stripe_ad_content }}
   </div>
 </section>
diff --git a/library/font_awesome/src/_includes/stripe-social.html b/library/font_awesome/src/_includes/stripe-social.html
index 6c303e385..9529bbd96 100644
--- a/library/font_awesome/src/_includes/stripe-social.html
+++ b/library/font_awesome/src/_includes/stripe-social.html
@@ -1,17 +1,34 @@
 <div id="social-buttons" class="hidden-print">
   <div class="container">
-    <ul class="unstyled inline">
+    <form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
+      <div class="row">
+        <div class="col-md-4 col-md-offset-2 col-sm-6">
+          <div class="form-group margin-bottom">
+            <input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
+          </div>
+        </div>
+        <div class="col-md-4 col-sm-6">
+          <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
+              data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
+              data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
+            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+    </form>
+
+    <ul class="list-inline">
       <li>
-        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+        <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
       </li>
       <li>
-        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
+        <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
       </li>
       <li class="follow-btn">
         <a href="https://twitter.com/{{ site.fontawesome.twitter }}" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @{{ site.fontawesome.twitter }}</a>
       </li>
       <li class="tweet-btn hidden-phone">
-        <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.fontawesome.url }}" data-text="Font Awesome, the iconic font designed for Bootstrap" data-counturl="{{ site.fontawesome.legacy_url }}" data-count="horizontal" data-via="{{ site.fontawesome.twitter }}" data-related="{{ site.fontawesome.author.twitter }}:Creator of Font Awesome">Tweet</a>
+        <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.fontawesome.url }}" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="{{ site.fontawesome.legacy_url }}" data-count="horizontal" data-via="{{ site.fontawesome.twitter }}" data-related="{{ site.fontawesome.author.twitter }}:Creator of Font Awesome">Tweet</a>
       </li>
     </ul>
   </div>
diff --git a/library/font_awesome/src/_includes/tell-me-thanks.html b/library/font_awesome/src/_includes/tell-me-thanks.html
index 94be6b209..19e4d502f 100644
--- a/library/font_awesome/src/_includes/tell-me-thanks.html
+++ b/library/font_awesome/src/_includes/tell-me-thanks.html
@@ -5,13 +5,13 @@
     open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
   </p>
   <div class="row">
-    <div class="span6">
-      <h3><a href="https://www.gittip.com/davegandy/"><i class="icon-gittip"></i> Tip me on Gittip</a></h3>
+    <div class="col-md-6 col-sm-6">
+      <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm" aria-hidden="true"></i>Tip me on Gittip</a></h3>
       <p>
         Gittip is a great way to let developers know you appreciate their work.
       </p>
     </div>
-    <div class="span6">
+    <div class="col-md-6 col-sm-6">
       <h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
       <p>
         Or pick something straight
diff --git a/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html
index df11b37b4..2c48c0ef4 100644
--- a/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html
+++ b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-anchor.html
@@ -1,6 +1,6 @@
-<a href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
-<a href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
-<a href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
-<a href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
-<a href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
-<a href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>
+<a href="#"><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270</a><br>
+<a href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal</a><br>
+<a href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical</a>
diff --git a/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html
index c8c9993fd..9399fc311 100644
--- a/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html
+++ b/library/font_awesome/src/_includes/tests/rotated-flipped-inside-btn.html
@@ -1,6 +1,6 @@
-<a class="btn" href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
-<a class="btn" href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
-<a class="btn" href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
-<a class="btn" href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
-<a class="btn" href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
-<a class="btn" href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>
+<a class="btn btn-default" href="#"><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical</a>
diff --git a/library/font_awesome/src/_includes/tests/rotated-flipped.html b/library/font_awesome/src/_includes/tests/rotated-flipped.html
index a6620cd3f..7f12a77ef 100644
--- a/library/font_awesome/src/_includes/tests/rotated-flipped.html
+++ b/library/font_awesome/src/_includes/tests/rotated-flipped.html
@@ -1,6 +1,6 @@
-<i class="icon-flag"></i>&nbsp; normal<br>
-<i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
-<i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
-<i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
-<i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
-<i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical
+<i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal<br>
+<i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90<br>
+<i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180<br>
+<i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270<br>
+<i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
+<i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical
diff --git a/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html b/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html
index d034a9959..04a6b31d2 100644
--- a/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html
+++ b/library/font_awesome/src/_includes/tests/stacked-inside-anchor.html
@@ -1,69 +1,69 @@
 <p>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-sign-blank icon-stack-base"></i>
-      <i class="icon-twitter icon-light"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-square fa-stack-2x"></i>
+      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
     </span>
     Twitter Icon
   </a>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-sign-blank icon-stack-base"></i>
-      <i class="icon-facebook icon-light"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-square fa-stack-2x"></i>
+      <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
     </span>
     Facebook Icon
   </a>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-sign-blank icon-stack-base"></i>
-      <i class="icon-github icon-light"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-square fa-stack-2x"></i>
+      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
     </span>
     GitHub Icon
   </a>
 </p>
 <p>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-circle icon-stack-base"></i>
-      <i class="icon-twitter icon-light"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-circle fa-stack-2x"></i>
+      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
     </span>
     Twitter Icon
   </a>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-circle icon-stack-base"></i>
-      <i class="icon-facebook icon-light"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-circle fa-stack-2x"></i>
+      <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
     </span>
     Facebook Icon
   </a>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-circle icon-stack-base"></i>
-      <i class="icon-github icon-light"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-circle fa-stack-2x"></i>
+      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
     </span>
     GitHub Icon
   </a>
 </p>
 <p>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-circle-blank icon-stack-base"></i>
-      <i class="icon-twitter"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-circle-o fa-stack-2x"></i>
+      <i class="fa fa-twitter fa-stack-1x"></i>
     </span>
     Twitter Icon
   </a>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-circle-blank icon-stack-base"></i>
-      <i class="icon-facebook"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-circle-o fa-stack-2x"></i>
+      <i class="fa fa-facebook-f fa-stack-1x"></i>
     </span>
     Facebook Icon
   </a>
   <a href="#">
-    <span class="icon-stack">
-      <i class="icon-circle-blank icon-stack-base"></i>
-      <i class="icon-github"></i>
+    <span class="fa-stack" aria-hidden="true">
+      <i class="fa fa-circle-o fa-stack-2x"></i>
+      <i class="fa fa-github fa-stack-1x"></i>
     </span>
     GitHub Icon
   </a>
-</p>
\ No newline at end of file
+</p>
diff --git a/library/font_awesome/src/_includes/tests/stacked-with-text.html b/library/font_awesome/src/_includes/tests/stacked-with-text.html
new file mode 100644
index 000000000..28a7500c8
--- /dev/null
+++ b/library/font_awesome/src/_includes/tests/stacked-with-text.html
@@ -0,0 +1,4 @@
+<span class="fa-stack" aria-hidden="true">
+  <i class="fa fa-calendar-o fa-stack-2x"></i>
+  <span class="fa-stack-1x padding-top-sm">27</span>
+</span>
diff --git a/library/font_awesome/src/_includes/tests/stacked.html b/library/font_awesome/src/_includes/tests/stacked.html
index 36e427f78..4d0040759 100644
--- a/library/font_awesome/src/_includes/tests/stacked.html
+++ b/library/font_awesome/src/_includes/tests/stacked.html
@@ -1,51 +1,58 @@
+<span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center">
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-square fa-stack-2x"></i>
+    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
+  </span><br>Center
+</span>
+<hr>
 <p>
-  <span class="icon-stack">
-    <i class="icon-sign-blank icon-stack-base"></i>
-    <i class="icon-twitter icon-light"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-square fa-stack-2x"></i>
+    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
   </span>
   Twitter Icon
-  <span class="icon-stack">
-    <i class="icon-sign-blank icon-stack-base"></i>
-    <i class="icon-facebook icon-light"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-square fa-stack-2x"></i>
+    <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
   </span>
   Facebook Icon
-  <span class="icon-stack">
-    <i class="icon-sign-blank icon-stack-base"></i>
-    <i class="icon-github icon-light"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-square fa-stack-2x"></i>
+    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
   </span>
   GitHub Icon
 </p>
 <p>
-  <span class="icon-stack">
-    <i class="icon-circle icon-stack-base"></i>
-    <i class="icon-twitter icon-light"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-circle fa-stack-2x"></i>
+    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
   </span>
   Twitter Icon
-  <span class="icon-stack">
-    <i class="icon-circle icon-stack-base"></i>
-    <i class="icon-facebook icon-light"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-circle fa-stack-2x"></i>
+    <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
   </span>
   Facebook Icon
-  <span class="icon-stack">
-    <i class="icon-circle icon-stack-base"></i>
-    <i class="icon-github icon-light"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-circle fa-stack-2x"></i>
+    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
   </span>
   GitHub Icon
 </p>
 <p>
-  <span class="icon-stack">
-    <i class="icon-circle-blank icon-stack-base"></i>
-    <i class="icon-twitter"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-circle-o fa-stack-2x"></i>
+    <i class="fa fa-twitter fa-stack-1x"></i>
   </span>
   Twitter Icon
-  <span class="icon-stack">
-    <i class="icon-circle-blank icon-stack-base"></i>
-    <i class="icon-facebook"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-circle-o fa-stack-2x"></i>
+    <i class="fa fa-facebook-f fa-stack-1x"></i>
   </span>
   Facebook Icon
-  <span class="icon-stack">
-    <i class="icon-circle-blank icon-stack-base"></i>
-    <i class="icon-github"></i>
+  <span class="fa-stack" aria-hidden="true">
+    <i class="fa fa-circle-o fa-stack-2x"></i>
+    <i class="fa fa-github fa-stack-1x"></i>
   </span>
   GitHub Icon
-</p>
\ No newline at end of file
+</p>
diff --git a/library/font_awesome/src/_includes/thanks-to.html b/library/font_awesome/src/_includes/thanks-to.html
index 8a2d15208..e48a65f06 100644
--- a/library/font_awesome/src/_includes/thanks-to.html
+++ b/library/font_awesome/src/_includes/thanks-to.html
@@ -1,24 +1,24 @@
 <section id="thanks-to">
   <h2 class="page-header">Thanks To</h2>
   <div class="row">
-    <div class="span4">
+    <div class="col-md-4 col-sm-4">
       <p>
         Thanks to <a href="https://twitter.com/robmadole/">@robmadole</a> and
         <a href="https://twitter.com/supercodepoet/">@supercodepoet</a> for icon design
         review, advice, some Jekyll help, and being all around badass coders.
       </p>
     </div>
-    <div class="span4">
+    <div class="col-md-4 col-sm-4">
       <p>
-        Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and
-        <a href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing and hosting
-        <a href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome.
+        HUGE thanks to <a href="https://twitter.com/gtagliala">@gtagliala</a> for doing such a fantastic job managing
+        pull requests and issues on the Font Awesome
+        <a href="{{ site.fontawesome.github.url }}">GitHub project</a>.
       </p>
     </div>
-    <div class="span4">
+    <div class="col-md-4 col-sm-4">
       <p>
-        Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent
-        <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to
+        Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn" aria-hidden="true">&nbsp;</i>MaxCDN</a> for providing the excellent
+        <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
         <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
       </p>
     </div>
diff --git a/library/font_awesome/src/_includes/whats-new.html b/library/font_awesome/src/_includes/whats-new.html
deleted file mode 100644
index d413d0dec..000000000
--- a/library/font_awesome/src/_includes/whats-new.html
+++ /dev/null
@@ -1,38 +0,0 @@
-{% capture stripe_ad_content %}
-<p class="lead">
-  Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome
-  {{ site.fontawesome.minor_version }}. Have some ideas for new features?
-  <a href="{{ page.relative_path }}community/">Help contribute</a>.
-</p>
-{% endcapture %}
-{% include stripe-ad.html %}
-
-<div id="whats-new">
-  <div class="row">
-    <div class="span4">
-      <h4><i class="icon-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
-      Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
-    </div>
-    <div class="span4">
-      <h4><i class="icon-terminal"></i> SCSS Support</h4>
-      A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>.
-    </div>
-    <div class="span4">
-      <h4><i class="icon-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4>
-      SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
-    </div>
-    <div class="span4 margin-bottom-large">
-      <h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
-      Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
-    </div>
-    <div class="span4">
-      <h4><i class="icon-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
-      Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
-    </div>
-    <div class="span4">
-      <h4><i class="icon-question-sign"></i> Want More Details?</h4>
-      Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
-      what's new and changed.
-    </div>
-  </div>
-</div>
diff --git a/library/font_awesome/src/_includes/why.html b/library/font_awesome/src/_includes/why.html
index ce3b87d13..1574d2c6c 100644
--- a/library/font_awesome/src/_includes/why.html
+++ b/library/font_awesome/src/_includes/why.html
@@ -1,41 +1,42 @@
-<div id="why">
+<section id="why" class="feature-list">
   <div class="row">
-    <div class="span4">
-      <h4><i class="icon-flag"></i> One Font, {{ icons | size }} Icons</h4>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-flag" aria-hidden="true"></i> One Font, {{ icons | size }} 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 class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-ban" aria-hidden="true"></i> No JavaScript Required</h4>
+      Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
     </div>
-    <div class="span4">
-      <h4><i class="icon-fullscreen"></i> Infinite Scalability</h4>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-arrows-alt" aria-hidden="true"></i> Infinite Scalability</h4>
       Scalable vector graphics means every icon looks awesome at any size.
     </div>
-    <div class="span4">
-      <h4><i class="icon-microphone"></i> Free, as in Speech</h4>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-microphone" aria-hidden="true"></i> Free, as in Speech</h4>
       Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}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 class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-pencil" aria-hidden="true"></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-eye-open"></i> Perfect on Retina Displays</h4>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-eye" aria-hidden="true"></i> Perfect on Retina Displays</h4>
       Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
     </div>
-    <div class="span4">
-      <h4><i class="icon-thumbs-up-alt"></i> Made for Bootstrap</h4>
-      Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-gamepad" aria-hidden="true"></i> Plays Well with Others</h4>
+      Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
     </div>
-    <div class="span4">
-      <h4><i class="icon-desktop"></i> Desktop Friendly</h4>
+    <div class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-desktop" aria-hidden="true"></i> Desktop Friendly</h4>
       To use on the desktop or for a complete set of vectors,
       check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
     </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 class="col-md-4 col-sm-6">
+      <h4><i class="fa fa-wheelchair" aria-hidden="true"></i> Accessibility-minded</h4>
+      Font Awesome <i class="fa fa-heart" aria-hidden="true"></i><span class="sr-only">loves</span> screen readers and
+<a href="{{ page.relative_path }}accessibility/">helps make your icons accessible</a> on the web.
     </div>
   </div>
-</div>
+</section>