1 files changed, 25 insertions, 24 deletions
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>