Home Explore Help
Sign In
mirrors
/
Fork-Awesome
mirror of https://github.com/ForkAwesome/Fork-Awesome
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

updating docs to 4.6.0

Dave Gandy 9 years ago
parent
66c94ec4d2
commit
c8941b61e7
100 changed files with 6303 additions and 2760 deletions
Unified View Show Diff Stats
  1. 1 1
      Makefile
  2. 449 0
      accessibility/index.html
  3. 2 2
      assets/css/site.css
  4. BIN
      assets/font-awesome-4.5.0.zip
  5. BIN
      assets/font-awesome-4.6.0.zip
  6. 1 1
      assets/font-awesome/HELP-US-OUT.txt
  7. 100 8
      assets/font-awesome/css/font-awesome.css
  8. 1 1
      assets/font-awesome/css/font-awesome.min.css
  9. BIN
      assets/font-awesome/fonts/FontAwesome.otf
  10. BIN
      assets/font-awesome/fonts/fontawesome-webfont.eot
  11. 24 24
      assets/font-awesome/fonts/fontawesome-webfont.svg
  12. BIN
      assets/font-awesome/fonts/fontawesome-webfont.ttf
  13. BIN
      assets/font-awesome/fonts/fontawesome-webfont.woff
  14. BIN
      assets/font-awesome/fonts/fontawesome-webfont.woff2
  15. 2 1
      assets/font-awesome/less/font-awesome.less
  16. 27 0
      assets/font-awesome/less/icons.less
  17. 36 2
      assets/font-awesome/less/mixins.less
  18. 1 1
      assets/font-awesome/less/path.less
  19. 5 0
      assets/font-awesome/less/screen-reader.less
  20. 29 2
      assets/font-awesome/less/variables.less
  21. 27 0
      assets/font-awesome/scss/_icons.scss
  22. 36 2
      assets/font-awesome/scss/_mixins.scss
  23. 5 0
      assets/font-awesome/scss/_screen-reader.scss
  24. 29 2
      assets/font-awesome/scss/_variables.scss
  25. 2 1
      assets/font-awesome/scss/font-awesome.scss
  26. 1 1
      assets/less/site/bootstrap/navbar.less
  27. 2 2
      assets/less/site/responsive/screen-lg.less
  28. 1 1
      assets/less/site/responsive/screen-sm.less
  29. 178 121
      cheatsheet/index.html
  30. 40 31
      community/index.html
  31. 270 117
      examples/index.html
  32. 43 34
      get-started/index.html
  33. 63 37
      icon/500px/index.html
  34. 63 37
      icon/adjust/index.html
  35. 63 37
      icon/adn/index.html
  36. 63 37
      icon/align-center/index.html
  37. 63 37
      icon/align-justify/index.html
  38. 63 37
      icon/align-left/index.html
  39. 63 37
      icon/align-right/index.html
  40. 63 37
      icon/amazon/index.html
  41. 63 37
      icon/ambulance/index.html
  42. 302 0
      icon/american-sign-language-interpreting/index.html
  43. 63 37
      icon/anchor/index.html
  44. 63 37
      icon/android/index.html
  45. 63 37
      icon/angellist/index.html
  46. 63 37
      icon/angle-double-down/index.html
  47. 63 37
      icon/angle-double-left/index.html
  48. 63 37
      icon/angle-double-right/index.html
  49. 63 37
      icon/angle-double-up/index.html
  50. 63 37
      icon/angle-down/index.html
  51. 63 37
      icon/angle-left/index.html
  52. 63 37
      icon/angle-right/index.html
  53. 63 37
      icon/angle-up/index.html
  54. 63 37
      icon/apple/index.html
  55. 63 37
      icon/archive/index.html
  56. 63 37
      icon/area-chart/index.html
  57. 63 37
      icon/arrow-circle-down/index.html
  58. 63 37
      icon/arrow-circle-left/index.html
  59. 63 37
      icon/arrow-circle-o-down/index.html
  60. 63 37
      icon/arrow-circle-o-left/index.html
  61. 63 37
      icon/arrow-circle-o-right/index.html
  62. 63 37
      icon/arrow-circle-o-up/index.html
  63. 63 37
      icon/arrow-circle-right/index.html
  64. 63 37
      icon/arrow-circle-up/index.html
  65. 63 37
      icon/arrow-down/index.html
  66. 63 37
      icon/arrow-left/index.html
  67. 63 37
      icon/arrow-right/index.html
  68. 63 37
      icon/arrow-up/index.html
  69. 63 37
      icon/arrows-alt/index.html
  70. 63 37
      icon/arrows-h/index.html
  71. 63 37
      icon/arrows-v/index.html
  72. 63 37
      icon/arrows/index.html
  73. 297 0
      icon/assistive-listening-systems/index.html
  74. 63 37
      icon/asterisk/index.html
  75. 63 37
      icon/at/index.html
  76. 297 0
      icon/audio-description/index.html
  77. 63 37
      icon/backward/index.html
  78. 63 37
      icon/balance-scale/index.html
  79. 63 37
      icon/ban/index.html
  80. 63 37
      icon/bar-chart/index.html
  81. 63 37
      icon/barcode/index.html
  82. 63 37
      icon/bars/index.html
  83. 63 37
      icon/battery-empty/index.html
  84. 63 37
      icon/battery-full/index.html
  85. 63 37
      icon/battery-half/index.html
  86. 63 37
      icon/battery-quarter/index.html
  87. 63 37
      icon/battery-three-quarters/index.html
  88. 63 37
      icon/bed/index.html
  89. 63 37
      icon/beer/index.html
  90. 63 37
      icon/behance-square/index.html
  91. 63 37
      icon/behance/index.html
  92. 63 37
      icon/bell-o/index.html
  93. 63 37
      icon/bell-slash-o/index.html
  94. 63 37
      icon/bell-slash/index.html
  95. 63 37
      icon/bell/index.html
  96. 63 37
      icon/bicycle/index.html
  97. 63 37
      icon/binoculars/index.html
  98. 63 37
      icon/birthday-cake/index.html
  99. 63 37
      icon/bitbucket-square/index.html
  100. 63 37
      icon/bitbucket/index.html

+ 1 - 1
Makefile
View File 

@@ -28,7 +28,7 @@ build:
 
 	bundle exec lessc --yui-compress ${SITE_LESS} > ${SITE_CSS}
 
 	bundle exec lessc --yui-compress ${SITE_LESS} > ${SITE_CSS}
 
 	cp -r ${FA_ROOT_DIRECTORY}/* ../
 
 	cp -r ${FA_ROOT_DIRECTORY}/* ../
 
 	mv README.md-nobuild ../README.md
 
 	mv README.md-nobuild ../README.md
 
-	cd assets && mv font-awesome font-awesome-4.5.0 && zip -r9 font-awesome-4.5.0.zip font-awesome-4.5.0 && mv font-awesome-4.5.0 font-awesome
 
+	cd assets && mv font-awesome font-awesome-4.6.0 && zip -r9 font-awesome-4.6.0.zip font-awesome-4.6.0 && mv font-awesome-4.6.0 font-awesome
 
 
 
 	find .. -type f ! -perm 644 -exec chmod 644 {} \;
 
 	find .. -type f ! -perm 644 -exec chmod 644 {} \;

+ 449 - 0
accessibility/index.html
View File 

@@ -0,0 +1,449 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <!-- Basic Page Needs
 
+ ================================================== -->
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 
+  <meta name="description" content="Font Awesome, the iconic font and CSS framework">
 
+  <meta name="author" content="Dave Gandy">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <link rel="shortcut icon" href="../assets/ico/favicon.ico">
 
+
 
+  <title>Font Awesome & Accessibility</title>
 
+
 
+  <!-- CSS
 
+  ================================================== -->
 
+  <link rel="stylesheet" href="../assets/css/site.css">
 
+  <link rel="stylesheet" href="../assets/css/pygments.css">
 
+  <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
 
+
 
+  <!--[if lt IE 9]>
 
+    <script src="../assets/js/html5shiv.js"></script>
 
+    <script src="../assets/js/respond.min.js"></script>
 
+  <![endif]-->
 
+
 
+  <script src="https://use.fonticons.com/ffe176a3.js"></script>
 
+
 
+  <script>
 
+    var _gaq = _gaq || [];
 
+    _gaq.push(['_setAccount', 'UA-30136587-1']);
 
+    _gaq.push(['_trackPageview']);
 
+
 
+    (function() {
 
+      var ga = document.createElement('script');
 
+      ga.src = 'https://www.google-analytics.com/ga.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(ga, s);
 
+    })();
 
+  </script>
 
+</head>
 
+<body>
 
+  <script>
 
+    (function(){
 
+      var bsa = document.createElement('script');
 
+      bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(bsa, s);
 
+    })();
 
+  </script>
 
+  <div id="wrap"> <!-- necessary for sticky footer. wrap all content except footer -->
 
+    <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="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="../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
+    </div>
 
+
 
+    <div class="navbar-collapse collapse">
 
+      <ul class="nav navbar-nav">
 
+        <li class="hidden-sm "><a href="../">Home</a></li>
 
+        <li class="hidden-sm">
 
+          <a href="../whats-new/">What's New</a>
 
+        </li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../whats-new/">New</a>
 
+        </li>
 
+
 
+        <li class="hidden-sm"><a href="../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../get-started/">Start</a>
 
+        </li>
 
+
 
+        <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../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="../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../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="../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../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"><a href="../examples/">Examples</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../examples/">Examples</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../examples/#basic">Basic Icons</a></li>
 
+            <li><a href="../examples/#larger">Larger Icons</a></li>
 
+            <li><a href="../examples/#fixed-width">Fixed Width Icons</a></li>
 
+            <li><a href="../examples/#list">List Icons</a></li>
 
+            <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
+            <li><a href="../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../examples/#accessible">Accessibility-Minded</a></li>
 
+            <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
+            <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
+            <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
+            <li><a href="../examples/#custom">Custom CSS</a></li>
 
+          </ul>
 
+        </li>
 
+        <li class="active"><a href="../accessibility/">Accessibility</a></li>
 
+        <li><a href="../community/">Community</a></li>
 
+        <li><a href="../license/">License</a></li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+
 
+    
+
 
+
 
+<div class="jumbotron jumbotron-ad hidden-print">
 
+  <div class="container">
 
+    <h1><i class="fa fa-universal-access" aria-hidden="true"></i>&nbsp; Accessibility</h1>
 
+    <p>Make your icons awesome for all of your users</p>
 
+  </div>
 
+</div>
 
+
 
+<div id="social-buttons" class="hidden-print">
 
+  <div class="container">
 
+    <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="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="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/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
 
+      </li>
 
+      <li class="tweet-btn hidden-phone">
 
+        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>
 
+      </li>
 
+    </ul>
 
+  </div>
 
+</div>
 
+
 
+
 
+<div class="container">
 
+  
+  <section class="hidden-print">
 
+  <div class="stripe-ad">
 
+    <script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
+
 
+    
+  <p class="lead">
 
+    Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible.
 
+  </p>
 
+
 
+  <p class="lead">
 
+    When creating web sites and apps, that means making sure our icons play well with assistive tech when users are navigating apps and sites.
 
+  </p>
 
+  
+  </div>
 
+</section>
 
+
 
+
 
+  <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 technolog 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>
 
+
 
+  <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">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-fighter-jet&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+</code></pre></div>
 
+<small class="text-muted">an icon being used as pure decoration</small>
 
+  </div>
 
+
 
+  <div class="margin-bottom-lg">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;logo&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-pied-piper&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
 
+<span class="nt">&lt;/h1&gt;</span>
 
+</code></pre></div>
 
+<small class="text-muted">an icon being used as a logo</small>
 
+  </div>
 
+
 
+  <div class="margin-bottom-lg">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;https://github.com/FortAwesome/Font-Awesome&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-github&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> View this project&#39;s code on Github<span class="nt">&lt;/a&gt;</span>
 
+</code></pre></div>
 
+<small class="text-muted">an icon being used in front of link text</small>
 
+  </div>
 
+
 
+  <h3>Icons that 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>
 
+    If not representing an interactive element, like a button or link, use both a <code>title</code> attribute and an  on the icon to provide a text alternative. This has the advantages of working with all modern screen readers, working well with the most ubiquitous speech recognition program, and helping users with cognitive disabilities by providing a mouse tooltip.
 
+  </p>
 
+
 
+  <div class="margin-bottom-lg margin-top-lg">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;dl&gt;</span>
 
+  <span class="nt">&lt;dt&gt;</span>
 
+    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-car&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Time to destination by car:<span class="nt">&lt;/span&gt;</span>
 
+  <span class="nt">&lt;/dt&gt;</span>
 
+  <span class="nt">&lt;dd&gt;</span>4 minutes<span class="nt">&lt;/dd&gt;</span>
 
+
 
+  <span class="nt">&lt;dt&gt;</span>
 
+    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bicycle&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Time to destination by bike:<span class="nt">&lt;/span&gt;</span>
 
+  <span class="nt">&lt;/dt&gt;</span>
 
+  <span class="nt">&lt;dd&gt;</span>12 minutes<span class="nt">&lt;/dd&gt;</span>
 
+<span class="nt">&lt;/dl&gt;</span>
 
+</code></pre></div>
 
+    <small class="text-muted">an icon being used to communicate travel methods</small>
 
+  </div>
 
+
 
+  <div class="margin-bottom-lg margin-top-lg">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-hourglass&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>60 minutes remains in your exam<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-hourglass-half&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>30 minutes remains in your exam<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-hourglass-end&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>0 minutes remains in your exam<span class="nt">&lt;/span&gt;</span>
 
+</code></pre></div>
 
+    <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 addition to the recommendations above, use a <code>title</code> attribute which makes the accessible text discoverable by mouse and those with cognitive disabilities.
 
+  </p>
 
+
 
+  <div class="margin-bottom-lg margin-top-lg">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;path/to/shopping/cart&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-shopping-cart&quot;</span> <span class="na">title=</span><span class="s">&quot;View 3 items in your shopping cart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>View 3 items in your shopping cart<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+</code></pre></div>
 
+    <small class="text-muted">an icon being used to communicate shopping cart state</small>
 
+  </div>
 
+
 
+  <div class="margin-bottom-lg margin-top-lg">
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#navigation-main&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span> <span class="na">title=</span><span class="s">&quot;Skip to main navigation&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Skip to main navigation<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+</code></pre></div>
 
+    <small class="text-muted">an icon being used as a link to a navigation menu</small>
 
+
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o&quot;</span> <span class="na">title=</span><span class="s">&quot;Delete&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Delete<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+</code></pre></div>
 
+    <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 make semantically accessible</a>. 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="../examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI.
 
+    </li>
 
+  </ul>
 
+</div>
 
+
 
+  <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 quality vision using high contrast mode to better see UI. There are some great tools and resources to learning and work on these 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>
 
+  </ul>
 
+
 
+  <p>
 
+    We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="../community/#reporting-bugs">let us know if any bugs or issues</a>.
 
+  </p>
 
+</div>
 
+
 
+</div>
 
+
 
+
 
+  </div>
 
+  <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="../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="../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="../assets/img/logo-themeisle.png" width="220" height="65" alt="">
 
+      </a>
 
+    </div>
 
+    <div>
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
+    </div>
 
+    <div>
 
+      Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>
 
+      <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
 
+      Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
 
+    </div>
 
+    <div>
 
+      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="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> &middot;
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a> &middot;
 
+      <a href="../3.2.1">Old 3.2.1 Docs</a>
 
+    </div>
 
+  </div>
 
+</footer>
 
+
 
+
 
+  <script src="https://platform.twitter.com/widgets.js"></script>
 
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
+  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
 
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
 
+  <script src="../assets/js/site.js"></script>
 
+  <script src="../assets/js/search.js"></script>
 
+  </body>
 
+</html>

+ 2 - 2
assets/css/site.css
View File 

@@ -7861,7 +7861,7 @@ div.bsap a.adhere:hover {
 
     font-size: 26px;
 
     font-size: 26px;
 
     line-height: 36px;
 
     line-height: 36px;
 
   }
 
   }
 
-  .fonticons .action {
 
+  .fort-awesome .action {
 
     width: 18%;
 
     width: 18%;
 
   }
 
   }
 
   .hide-lg {
 
   .hide-lg {
 
@@ -7913,7 +7913,7 @@ div.bsap a.adhere:hover {
 
     padding-top: 0;
 
     padding-top: 0;
 
     font-size: 19px;
 
     font-size: 19px;
 
   }
 
   }
 
-  .fonticons .action {
 
+  .fort-awesome .action {
 
     width: 33%;
 
     width: 33%;
 
   }
 
   }
 
   .hide-sm {
 
   .hide-sm {

BIN
assets/font-awesome-4.5.0.zip
View File


BIN
assets/font-awesome-4.6.0.zip
View File


+ 1 - 1
assets/font-awesome/HELP-US-OUT.txt
View File 

@@ -1,5 +1,5 @@
 
 I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
 
 I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
 
-Fonticons (https://fonticons.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
 
+Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
 
 comprehensive icon sets or copy and paste your own.
 
 comprehensive icon sets or copy and paste your own.
 
 
 
 Please. Check it out.
 
 Please. Check it out.

+ 100 - 8
assets/font-awesome/css/font-awesome.css
View File 

@@ -1,13 +1,13 @@
 
 /*!
 
 /*!
 
- *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
 
+ *  Font Awesome 4.6.0 by @davegandy - http://fontawesome.io - @fontawesome
 
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 
  */
 
  */
 
 /* FONT PATH
 
 /* FONT PATH
 
  * -------------------------- */
 
  * -------------------------- */
 
 @font-face {
 
 @font-face {
 
   font-family: 'FontAwesome';
 
   font-family: 'FontAwesome';
 
-  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
 
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
 
+  src: url('../fonts/fontawesome-webfont.eot?v=4.6.0');
 
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.0#fontawesomeregular') format('svg');
 
   font-weight: normal;
 
   font-weight: normal;
 
   font-style: normal;
 
   font-style: normal;
 
 }
 
 }
 
@@ -118,31 +118,31 @@
 
   }
 
   }
 
 }
 
 }
 
 .fa-rotate-90 {
 
 .fa-rotate-90 {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
 
   -webkit-transform: rotate(90deg);
 
   -webkit-transform: rotate(90deg);
 
   -ms-transform: rotate(90deg);
 
   -ms-transform: rotate(90deg);
 
   transform: rotate(90deg);
 
   transform: rotate(90deg);
 
 }
 
 }
 
 .fa-rotate-180 {
 
 .fa-rotate-180 {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
 
   -webkit-transform: rotate(180deg);
 
   -webkit-transform: rotate(180deg);
 
   -ms-transform: rotate(180deg);
 
   -ms-transform: rotate(180deg);
 
   transform: rotate(180deg);
 
   transform: rotate(180deg);
 
 }
 
 }
 
 .fa-rotate-270 {
 
 .fa-rotate-270 {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
 
   -webkit-transform: rotate(270deg);
 
   -webkit-transform: rotate(270deg);
 
   -ms-transform: rotate(270deg);
 
   -ms-transform: rotate(270deg);
 
   transform: rotate(270deg);
 
   transform: rotate(270deg);
 
 }
 
 }
 
 .fa-flip-horizontal {
 
 .fa-flip-horizontal {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
 
   -webkit-transform: scale(-1, 1);
 
   -webkit-transform: scale(-1, 1);
 
   -ms-transform: scale(-1, 1);
 
   -ms-transform: scale(-1, 1);
 
   transform: scale(-1, 1);
 
   transform: scale(-1, 1);
 
 }
 
 }
 
 .fa-flip-vertical {
 
 .fa-flip-vertical {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
 
   -webkit-transform: scale(1, -1);
 
   -webkit-transform: scale(1, -1);
 
   -ms-transform: scale(1, -1);
 
   -ms-transform: scale(1, -1);
 
   transform: scale(1, -1);
 
   transform: scale(1, -1);
 
@@ -2084,3 +2084,95 @@
 
 .fa-percent:before {
 
 .fa-percent:before {
 
   content: "\f295";
 
   content: "\f295";
 
 }
 
 }
 
+.fa-gitlab:before {
 
+  content: "\f296";
 
+}
 
+.fa-wpbeginner:before {
 
+  content: "\f297";
 
+}
 
+.fa-wpforms:before {
 
+  content: "\f298";
 
+}
 
+.fa-envira:before {
 
+  content: "\f299";
 
+}
 
+.fa-universal-access:before {
 
+  content: "\f29a";
 
+}
 
+.fa-wheelchair-alt:before {
 
+  content: "\f29b";
 
+}
 
+.fa-question-circle-o:before {
 
+  content: "\f29c";
 
+}
 
+.fa-blind:before {
 
+  content: "\f29d";
 
+}
 
+.fa-audio-description:before {
 
+  content: "\f29e";
 
+}
 
+.fa-volume-control-phone:before {
 
+  content: "\f2a0";
 
+}
 
+.fa-braille:before {
 
+  content: "\f2a1";
 
+}
 
+.fa-assistive-listening-systems:before {
 
+  content: "\f2a2";
 
+}
 
+.fa-asl-interpreting:before,
 
+.fa-american-sign-language-interpreting:before {
 
+  content: "\f2a3";
 
+}
 
+.fa-deafness:before,
 
+.fa-hard-of-hearing:before,
 
+.fa-deaf:before {
 
+  content: "\f2a4";
 
+}
 
+.fa-glide:before {
 
+  content: "\f2a5";
 
+}
 
+.fa-glide-g:before {
 
+  content: "\f2a6";
 
+}
 
+.fa-signing:before,
 
+.fa-sign-language:before {
 
+  content: "\f2a7";
 
+}
 
+.fa-low-vision:before {
 
+  content: "\f2a8";
 
+}
 
+.fa-viadeo:before {
 
+  content: "\f2a9";
 
+}
 
+.fa-viadeo-square:before {
 
+  content: "\f2aa";
 
+}
 
+.fa-snapchat:before {
 
+  content: "\f2ab";
 
+}
 
+.fa-snapchat-ghost:before {
 
+  content: "\f2ac";
 
+}
 
+.fa-snapchat-square:before {
 
+  content: "\f2ad";
 
+}
 
+.sr-only {
 
+  position: absolute;
 
+  width: 1px;
 
+  height: 1px;
 
+  padding: 0;
 
+  margin: -1px;
 
+  overflow: hidden;
 
+  clip: rect(0, 0, 0, 0);
 
+  border: 0;
 
+}
 
+.sr-only-focusable:active,
 
+.sr-only-focusable:focus {
 
+  position: static;
 
+  width: auto;
 
+  height: auto;
 
+  margin: 0;
 
+  overflow: visible;
 
+  clip: auto;
 
+}

File diff suppressed because it is too large
+ 1 - 1
assets/font-awesome/css/font-awesome.min.css


BIN
assets/font-awesome/fonts/FontAwesome.otf
View File


BIN
assets/font-awesome/fonts/fontawesome-webfont.eot
View File


File diff suppressed because it is too large
+ 24 - 24
assets/font-awesome/fonts/fontawesome-webfont.svg


BIN
assets/font-awesome/fonts/fontawesome-webfont.ttf
View File


BIN
assets/font-awesome/fonts/fontawesome-webfont.woff
View File


BIN
assets/font-awesome/fonts/fontawesome-webfont.woff2
View File


+ 2 - 1
assets/font-awesome/less/font-awesome.less
View File 

@@ -1,5 +1,5 @@
 
 /*!
 
 /*!
 
- *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
 
+ *  Font Awesome 4.6.0 by @davegandy - http://fontawesome.io - @fontawesome
 
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 
  */
 
  */
 
 
 
@@ -15,3 +15,4 @@
 
 @import "rotated-flipped.less";
 
 @import "rotated-flipped.less";
 
 @import "stacked.less";
 
 @import "stacked.less";
 
 @import "icons.less";
 
 @import "icons.less";
 
+@import "screen-reader.less";

+ 27 - 0
assets/font-awesome/less/icons.less
View File 

@@ -695,3 +695,30 @@
 
 .@{fa-css-prefix}-bluetooth:before { content: @fa-var-bluetooth; }
 
 .@{fa-css-prefix}-bluetooth:before { content: @fa-var-bluetooth; }
 
 .@{fa-css-prefix}-bluetooth-b:before { content: @fa-var-bluetooth-b; }
 
 .@{fa-css-prefix}-bluetooth-b:before { content: @fa-var-bluetooth-b; }
 
 .@{fa-css-prefix}-percent:before { content: @fa-var-percent; }
 
 .@{fa-css-prefix}-percent:before { content: @fa-var-percent; }
 
+.@{fa-css-prefix}-gitlab:before { content: @fa-var-gitlab; }
 
+.@{fa-css-prefix}-wpbeginner:before { content: @fa-var-wpbeginner; }
 
+.@{fa-css-prefix}-wpforms:before { content: @fa-var-wpforms; }
 
+.@{fa-css-prefix}-envira:before { content: @fa-var-envira; }
 
+.@{fa-css-prefix}-universal-access:before { content: @fa-var-universal-access; }
 
+.@{fa-css-prefix}-wheelchair-alt:before { content: @fa-var-wheelchair-alt; }
 
+.@{fa-css-prefix}-question-circle-o:before { content: @fa-var-question-circle-o; }
 
+.@{fa-css-prefix}-blind:before { content: @fa-var-blind; }
 
+.@{fa-css-prefix}-audio-description:before { content: @fa-var-audio-description; }
 
+.@{fa-css-prefix}-volume-control-phone:before { content: @fa-var-volume-control-phone; }
 
+.@{fa-css-prefix}-braille:before { content: @fa-var-braille; }
 
+.@{fa-css-prefix}-assistive-listening-systems:before { content: @fa-var-assistive-listening-systems; }
 
+.@{fa-css-prefix}-asl-interpreting:before,
 
+.@{fa-css-prefix}-american-sign-language-interpreting:before { content: @fa-var-american-sign-language-interpreting; }
 
+.@{fa-css-prefix}-deafness:before,
 
+.@{fa-css-prefix}-hard-of-hearing:before,
 
+.@{fa-css-prefix}-deaf:before { content: @fa-var-deaf; }
 
+.@{fa-css-prefix}-glide:before { content: @fa-var-glide; }
 
+.@{fa-css-prefix}-glide-g:before { content: @fa-var-glide-g; }
 
+.@{fa-css-prefix}-signing:before,
 
+.@{fa-css-prefix}-sign-language:before { content: @fa-var-sign-language; }
 
+.@{fa-css-prefix}-low-vision:before { content: @fa-var-low-vision; }
 
+.@{fa-css-prefix}-viadeo:before { content: @fa-var-viadeo; }
 
+.@{fa-css-prefix}-viadeo-square:before { content: @fa-var-viadeo-square; }
 
+.@{fa-css-prefix}-snapchat:before { content: @fa-var-snapchat; }
 
+.@{fa-css-prefix}-snapchat-ghost:before { content: @fa-var-snapchat-ghost; }
 
+.@{fa-css-prefix}-snapchat-square:before { content: @fa-var-snapchat-square; }

+ 36 - 2
assets/font-awesome/less/mixins.less
View File 

@@ -12,15 +12,49 @@
 
 }
 
 }
 
 
 
 .fa-icon-rotate(@degrees, @rotation) {
 
 .fa-icon-rotate(@degrees, @rotation) {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
 
   -webkit-transform: rotate(@degrees);
 
   -webkit-transform: rotate(@degrees);
 
       -ms-transform: rotate(@degrees);
 
       -ms-transform: rotate(@degrees);
 
           transform: rotate(@degrees);
 
           transform: rotate(@degrees);
 
 }
 
 }
 
 
 
 .fa-icon-flip(@horiz, @vert, @rotation) {
 
 .fa-icon-flip(@horiz, @vert, @rotation) {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1);
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
 
   -webkit-transform: scale(@horiz, @vert);
 
   -webkit-transform: scale(@horiz, @vert);
 
       -ms-transform: scale(@horiz, @vert);
 
       -ms-transform: scale(@horiz, @vert);
 
           transform: scale(@horiz, @vert);
 
           transform: scale(@horiz, @vert);
 
 }
 
 }
 
+
 
+
 
+// Only display content to screen readers. À la Bootstrap 4.
 
+//
 
+// See: http://a11yproject.com/posts/how-to-hide-content/
 
+
 
+.sr-only() {
 
+  position: absolute;
 
+  width: 1px;
 
+  height: 1px;
 
+  padding: 0;
 
+  margin: -1px;
 
+  overflow: hidden;
 
+  clip: rect(0,0,0,0);
 
+  border: 0;
 
+}
 
+
 
+// Use in conjunction with .sr-only to only display content when it's focused.
 
+//
 
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
+//
 
+// Credit: HTML5 Boilerplate
 
+
 
+.sr-only-focusable() {
 
+  &:active,
 
+  &:focus {
 
+    position: static;
 
+    width: auto;
 
+    height: auto;
 
+    margin: 0;
 
+    overflow: visible;
 
+    clip: auto;
 
+  }
 
+}

+ 1 - 1
assets/font-awesome/less/path.less
View File 

@@ -9,7 +9,7 @@
 
     url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
 
     url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
 
     url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
 
     url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
 
     url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
 
     url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
 
-//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
 
+  // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
 
   font-weight: normal;
 
   font-weight: normal;
 
   font-style: normal;
 
   font-style: normal;
 
 }
 
 }

+ 5 - 0
assets/font-awesome/less/screen-reader.less
View File 

@@ -0,0 +1,5 @@
 
+// Screen Readers
 
+// -------------------------
 
+
 
+.sr-only { .sr-only(); }
 
+.sr-only-focusable { .sr-only-focusable(); }

+ 29 - 2
assets/font-awesome/less/variables.less
View File 

@@ -4,9 +4,9 @@
 
 @fa-font-path:        "../fonts";
 
 @fa-font-path:        "../fonts";
 
 @fa-font-size-base:   14px;
 
 @fa-font-size-base:   14px;
 
 @fa-line-height-base: 1;
 
 @fa-line-height-base: 1;
 
-//@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts"; // for referencing Bootstrap CDN font files directly
 
+//@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.6.0/fonts"; // for referencing Bootstrap CDN font files directly
 
 @fa-css-prefix:       fa;
 
 @fa-css-prefix:       fa;
 
-@fa-version:          "4.5.0";
 
+@fa-version:          "4.6.0";
 
 @fa-border-color:     #eee;
 
 @fa-border-color:     #eee;
 
 @fa-inverse:          #fff;
 
 @fa-inverse:          #fff;
 
 @fa-li-width:         (30em / 14);
 
 @fa-li-width:         (30em / 14);
 
@@ -20,6 +20,7 @@
 
 @fa-var-align-right: "\f038";
 
 @fa-var-align-right: "\f038";
 
 @fa-var-amazon: "\f270";
 
 @fa-var-amazon: "\f270";
 
 @fa-var-ambulance: "\f0f9";
 
 @fa-var-ambulance: "\f0f9";
 
+@fa-var-american-sign-language-interpreting: "\f2a3";
 
 @fa-var-anchor: "\f13d";
 
 @fa-var-anchor: "\f13d";
 
 @fa-var-android: "\f17b";
 
 @fa-var-android: "\f17b";
 
 @fa-var-angellist: "\f209";
 
 @fa-var-angellist: "\f209";
 
@@ -50,8 +51,11 @@
 
 @fa-var-arrows-alt: "\f0b2";
 
 @fa-var-arrows-alt: "\f0b2";
 
 @fa-var-arrows-h: "\f07e";
 
 @fa-var-arrows-h: "\f07e";
 
 @fa-var-arrows-v: "\f07d";
 
 @fa-var-arrows-v: "\f07d";
 
+@fa-var-asl-interpreting: "\f2a3";
 
+@fa-var-assistive-listening-systems: "\f2a2";
 
 @fa-var-asterisk: "\f069";
 
 @fa-var-asterisk: "\f069";
 
 @fa-var-at: "\f1fa";
 
 @fa-var-at: "\f1fa";
 
+@fa-var-audio-description: "\f29e";
 
 @fa-var-automobile: "\f1b9";
 
 @fa-var-automobile: "\f1b9";
 
 @fa-var-backward: "\f04a";
 
 @fa-var-backward: "\f04a";
 
 @fa-var-balance-scale: "\f24e";
 
 @fa-var-balance-scale: "\f24e";
 
@@ -86,6 +90,7 @@
 
 @fa-var-bitbucket-square: "\f172";
 
 @fa-var-bitbucket-square: "\f172";
 
 @fa-var-bitcoin: "\f15a";
 
 @fa-var-bitcoin: "\f15a";
 
 @fa-var-black-tie: "\f27e";
 
 @fa-var-black-tie: "\f27e";
 
+@fa-var-blind: "\f29d";
 
 @fa-var-bluetooth: "\f293";
 
 @fa-var-bluetooth: "\f293";
 
 @fa-var-bluetooth-b: "\f294";
 
 @fa-var-bluetooth-b: "\f294";
 
 @fa-var-bold: "\f032";
 
 @fa-var-bold: "\f032";
 
@@ -94,6 +99,7 @@
 
 @fa-var-book: "\f02d";
 
 @fa-var-book: "\f02d";
 
 @fa-var-bookmark: "\f02e";
 
 @fa-var-bookmark: "\f02e";
 
 @fa-var-bookmark-o: "\f097";
 
 @fa-var-bookmark-o: "\f097";
 
+@fa-var-braille: "\f2a1";
 
 @fa-var-briefcase: "\f0b1";
 
 @fa-var-briefcase: "\f0b1";
 
 @fa-var-btc: "\f15a";
 
 @fa-var-btc: "\f15a";
 
 @fa-var-bug: "\f188";
 
 @fa-var-bug: "\f188";
 
@@ -196,6 +202,8 @@
 
 @fa-var-dashboard: "\f0e4";
 
 @fa-var-dashboard: "\f0e4";
 
 @fa-var-dashcube: "\f210";
 
 @fa-var-dashcube: "\f210";
 
 @fa-var-database: "\f1c0";
 
 @fa-var-database: "\f1c0";
 
+@fa-var-deaf: "\f2a4";
 
+@fa-var-deafness: "\f2a4";
 
 @fa-var-dedent: "\f03b";
 
 @fa-var-dedent: "\f03b";
 
 @fa-var-delicious: "\f1a5";
 
 @fa-var-delicious: "\f1a5";
 
 @fa-var-desktop: "\f108";
 
 @fa-var-desktop: "\f108";
 
@@ -217,6 +225,7 @@
 
 @fa-var-envelope: "\f0e0";
 
 @fa-var-envelope: "\f0e0";
 
 @fa-var-envelope-o: "\f003";
 
 @fa-var-envelope-o: "\f003";
 
 @fa-var-envelope-square: "\f199";
 
 @fa-var-envelope-square: "\f199";
 
+@fa-var-envira: "\f299";
 
 @fa-var-eraser: "\f12d";
 
 @fa-var-eraser: "\f12d";
 
 @fa-var-eur: "\f153";
 
 @fa-var-eur: "\f153";
 
 @fa-var-euro: "\f153";
 
 @fa-var-euro: "\f153";
 
@@ -300,8 +309,11 @@
 
 @fa-var-github: "\f09b";
 
 @fa-var-github: "\f09b";
 
 @fa-var-github-alt: "\f113";
 
 @fa-var-github-alt: "\f113";
 
 @fa-var-github-square: "\f092";
 
 @fa-var-github-square: "\f092";
 
+@fa-var-gitlab: "\f296";
 
 @fa-var-gittip: "\f184";
 
 @fa-var-gittip: "\f184";
 
 @fa-var-glass: "\f000";
 
 @fa-var-glass: "\f000";
 
+@fa-var-glide: "\f2a5";
 
+@fa-var-glide-g: "\f2a6";
 
 @fa-var-globe: "\f0ac";
 
 @fa-var-globe: "\f0ac";
 
 @fa-var-google: "\f1a0";
 
 @fa-var-google: "\f1a0";
 
 @fa-var-google-plus: "\f0d5";
 
 @fa-var-google-plus: "\f0d5";
 
@@ -325,6 +337,7 @@
 
 @fa-var-hand-scissors-o: "\f257";
 
 @fa-var-hand-scissors-o: "\f257";
 
 @fa-var-hand-spock-o: "\f259";
 
 @fa-var-hand-spock-o: "\f259";
 
 @fa-var-hand-stop-o: "\f256";
 
 @fa-var-hand-stop-o: "\f256";
 
+@fa-var-hard-of-hearing: "\f2a4";
 
 @fa-var-hashtag: "\f292";
 
 @fa-var-hashtag: "\f292";
 
 @fa-var-hdd-o: "\f0a0";
 
 @fa-var-hdd-o: "\f0a0";
 
 @fa-var-header: "\f1dc";
 
 @fa-var-header: "\f1dc";
 
@@ -397,6 +410,7 @@
 
 @fa-var-long-arrow-left: "\f177";
 
 @fa-var-long-arrow-left: "\f177";
 
 @fa-var-long-arrow-right: "\f178";
 
 @fa-var-long-arrow-right: "\f178";
 
 @fa-var-long-arrow-up: "\f176";
 
 @fa-var-long-arrow-up: "\f176";
 
+@fa-var-low-vision: "\f2a8";
 
 @fa-var-magic: "\f0d0";
 
 @fa-var-magic: "\f0d0";
 
 @fa-var-magnet: "\f076";
 
 @fa-var-magnet: "\f076";
 
 @fa-var-mail-forward: "\f064";
 
 @fa-var-mail-forward: "\f064";
 
@@ -490,6 +504,7 @@
 
 @fa-var-qrcode: "\f029";
 
 @fa-var-qrcode: "\f029";
 
 @fa-var-question: "\f128";
 
 @fa-var-question: "\f128";
 
 @fa-var-question-circle: "\f059";
 
 @fa-var-question-circle: "\f059";
 
+@fa-var-question-circle-o: "\f29c";
 
 @fa-var-quote-left: "\f10d";
 
 @fa-var-quote-left: "\f10d";
 
 @fa-var-quote-right: "\f10e";
 
 @fa-var-quote-right: "\f10e";
 
 @fa-var-ra: "\f1d0";
 
 @fa-var-ra: "\f1d0";
 
@@ -544,8 +559,10 @@
 
 @fa-var-shopping-basket: "\f291";
 
 @fa-var-shopping-basket: "\f291";
 
 @fa-var-shopping-cart: "\f07a";
 
 @fa-var-shopping-cart: "\f07a";
 
 @fa-var-sign-in: "\f090";
 
 @fa-var-sign-in: "\f090";
 
+@fa-var-sign-language: "\f2a7";
 
 @fa-var-sign-out: "\f08b";
 
 @fa-var-sign-out: "\f08b";
 
 @fa-var-signal: "\f012";
 
 @fa-var-signal: "\f012";
 
+@fa-var-signing: "\f2a7";
 
 @fa-var-simplybuilt: "\f215";
 
 @fa-var-simplybuilt: "\f215";
 
 @fa-var-sitemap: "\f0e8";
 
 @fa-var-sitemap: "\f0e8";
 
 @fa-var-skyatlas: "\f216";
 
 @fa-var-skyatlas: "\f216";
 
@@ -554,6 +571,9 @@
 
 @fa-var-sliders: "\f1de";
 
 @fa-var-sliders: "\f1de";
 
 @fa-var-slideshare: "\f1e7";
 
 @fa-var-slideshare: "\f1e7";
 
 @fa-var-smile-o: "\f118";
 
 @fa-var-smile-o: "\f118";
 
+@fa-var-snapchat: "\f2ab";
 
+@fa-var-snapchat-ghost: "\f2ac";
 
+@fa-var-snapchat-square: "\f2ad";
 
 @fa-var-soccer-ball-o: "\f1e3";
 
 @fa-var-soccer-ball-o: "\f1e3";
 
 @fa-var-sort: "\f0dc";
 
 @fa-var-sort: "\f0dc";
 
 @fa-var-sort-alpha-asc: "\f15d";
 
 @fa-var-sort-alpha-asc: "\f15d";
 
@@ -655,6 +675,7 @@
 
 @fa-var-umbrella: "\f0e9";
 
 @fa-var-umbrella: "\f0e9";
 
 @fa-var-underline: "\f0cd";
 
 @fa-var-underline: "\f0cd";
 
 @fa-var-undo: "\f0e2";
 
 @fa-var-undo: "\f0e2";
 
+@fa-var-universal-access: "\f29a";
 
 @fa-var-university: "\f19c";
 
 @fa-var-university: "\f19c";
 
 @fa-var-unlink: "\f127";
 
 @fa-var-unlink: "\f127";
 
 @fa-var-unlock: "\f09c";
 
 @fa-var-unlock: "\f09c";
 
@@ -673,11 +694,14 @@
 
 @fa-var-venus-double: "\f226";
 
 @fa-var-venus-double: "\f226";
 
 @fa-var-venus-mars: "\f228";
 
 @fa-var-venus-mars: "\f228";
 
 @fa-var-viacoin: "\f237";
 
 @fa-var-viacoin: "\f237";
 
+@fa-var-viadeo: "\f2a9";
 
+@fa-var-viadeo-square: "\f2aa";
 
 @fa-var-video-camera: "\f03d";
 
 @fa-var-video-camera: "\f03d";
 
 @fa-var-vimeo: "\f27d";
 
 @fa-var-vimeo: "\f27d";
 
 @fa-var-vimeo-square: "\f194";
 
 @fa-var-vimeo-square: "\f194";
 
 @fa-var-vine: "\f1ca";
 
 @fa-var-vine: "\f1ca";
 
 @fa-var-vk: "\f189";
 
 @fa-var-vk: "\f189";
 
+@fa-var-volume-control-phone: "\f2a0";
 
 @fa-var-volume-down: "\f027";
 
 @fa-var-volume-down: "\f027";
 
 @fa-var-volume-off: "\f026";
 
 @fa-var-volume-off: "\f026";
 
 @fa-var-volume-up: "\f028";
 
 @fa-var-volume-up: "\f028";
 
@@ -687,11 +711,14 @@
 
 @fa-var-weixin: "\f1d7";
 
 @fa-var-weixin: "\f1d7";
 
 @fa-var-whatsapp: "\f232";
 
 @fa-var-whatsapp: "\f232";
 
 @fa-var-wheelchair: "\f193";
 
 @fa-var-wheelchair: "\f193";
 
+@fa-var-wheelchair-alt: "\f29b";
 
 @fa-var-wifi: "\f1eb";
 
 @fa-var-wifi: "\f1eb";
 
 @fa-var-wikipedia-w: "\f266";
 
 @fa-var-wikipedia-w: "\f266";
 
 @fa-var-windows: "\f17a";
 
 @fa-var-windows: "\f17a";
 
 @fa-var-won: "\f159";
 
 @fa-var-won: "\f159";
 
 @fa-var-wordpress: "\f19a";
 
 @fa-var-wordpress: "\f19a";
 
+@fa-var-wpbeginner: "\f297";
 
+@fa-var-wpforms: "\f298";
 
 @fa-var-wrench: "\f0ad";
 
 @fa-var-wrench: "\f0ad";
 
 @fa-var-xing: "\f168";
 
 @fa-var-xing: "\f168";
 
 @fa-var-xing-square: "\f169";
 
 @fa-var-xing-square: "\f169";

+ 27 - 0
assets/font-awesome/scss/_icons.scss
View File 

@@ -695,3 +695,30 @@
 
 .#{$fa-css-prefix}-bluetooth:before { content: $fa-var-bluetooth; }
 
 .#{$fa-css-prefix}-bluetooth:before { content: $fa-var-bluetooth; }
 
 .#{$fa-css-prefix}-bluetooth-b:before { content: $fa-var-bluetooth-b; }
 
 .#{$fa-css-prefix}-bluetooth-b:before { content: $fa-var-bluetooth-b; }
 
 .#{$fa-css-prefix}-percent:before { content: $fa-var-percent; }
 
 .#{$fa-css-prefix}-percent:before { content: $fa-var-percent; }
 
+.#{$fa-css-prefix}-gitlab:before { content: $fa-var-gitlab; }
 
+.#{$fa-css-prefix}-wpbeginner:before { content: $fa-var-wpbeginner; }
 
+.#{$fa-css-prefix}-wpforms:before { content: $fa-var-wpforms; }
 
+.#{$fa-css-prefix}-envira:before { content: $fa-var-envira; }
 
+.#{$fa-css-prefix}-universal-access:before { content: $fa-var-universal-access; }
 
+.#{$fa-css-prefix}-wheelchair-alt:before { content: $fa-var-wheelchair-alt; }
 
+.#{$fa-css-prefix}-question-circle-o:before { content: $fa-var-question-circle-o; }
 
+.#{$fa-css-prefix}-blind:before { content: $fa-var-blind; }
 
+.#{$fa-css-prefix}-audio-description:before { content: $fa-var-audio-description; }
 
+.#{$fa-css-prefix}-volume-control-phone:before { content: $fa-var-volume-control-phone; }
 
+.#{$fa-css-prefix}-braille:before { content: $fa-var-braille; }
 
+.#{$fa-css-prefix}-assistive-listening-systems:before { content: $fa-var-assistive-listening-systems; }
 
+.#{$fa-css-prefix}-asl-interpreting:before,
 
+.#{$fa-css-prefix}-american-sign-language-interpreting:before { content: $fa-var-american-sign-language-interpreting; }
 
+.#{$fa-css-prefix}-deafness:before,
 
+.#{$fa-css-prefix}-hard-of-hearing:before,
 
+.#{$fa-css-prefix}-deaf:before { content: $fa-var-deaf; }
 
+.#{$fa-css-prefix}-glide:before { content: $fa-var-glide; }
 
+.#{$fa-css-prefix}-glide-g:before { content: $fa-var-glide-g; }
 
+.#{$fa-css-prefix}-signing:before,
 
+.#{$fa-css-prefix}-sign-language:before { content: $fa-var-sign-language; }
 
+.#{$fa-css-prefix}-low-vision:before { content: $fa-var-low-vision; }
 
+.#{$fa-css-prefix}-viadeo:before { content: $fa-var-viadeo; }
 
+.#{$fa-css-prefix}-viadeo-square:before { content: $fa-var-viadeo-square; }
 
+.#{$fa-css-prefix}-snapchat:before { content: $fa-var-snapchat; }
 
+.#{$fa-css-prefix}-snapchat-ghost:before { content: $fa-var-snapchat-ghost; }
 
+.#{$fa-css-prefix}-snapchat-square:before { content: $fa-var-snapchat-square; }

+ 36 - 2
assets/font-awesome/scss/_mixins.scss
View File 

@@ -12,15 +12,49 @@
 
 }
 
 }
 
 
 
 @mixin fa-icon-rotate($degrees, $rotation) {
 
 @mixin fa-icon-rotate($degrees, $rotation) {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
 
   -webkit-transform: rotate($degrees);
 
   -webkit-transform: rotate($degrees);
 
       -ms-transform: rotate($degrees);
 
       -ms-transform: rotate($degrees);
 
           transform: rotate($degrees);
 
           transform: rotate($degrees);
 
 }
 
 }
 
 
 
 @mixin fa-icon-flip($horiz, $vert, $rotation) {
 
 @mixin fa-icon-flip($horiz, $vert, $rotation) {
 
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
 
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
 
   -webkit-transform: scale($horiz, $vert);
 
   -webkit-transform: scale($horiz, $vert);
 
       -ms-transform: scale($horiz, $vert);
 
       -ms-transform: scale($horiz, $vert);
 
           transform: scale($horiz, $vert);
 
           transform: scale($horiz, $vert);
 
 }
 
 }
 
+
 
+
 
+// Only display content to screen readers. À la Bootstrap 4.
 
+//
 
+// See: http://a11yproject.com/posts/how-to-hide-content/
 
+
 
+@mixin sr-only {
 
+  position: absolute;
 
+  width: 1px;
 
+  height: 1px;
 
+  padding: 0;
 
+  margin: -1px;
 
+  overflow: hidden;
 
+  clip: rect(0,0,0,0);
 
+  border: 0;
 
+}
 
+
 
+// Use in conjunction with .sr-only to only display content when it's focused.
 
+//
 
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
+//
 
+// Credit: HTML5 Boilerplate
 
+
 
+@mixin sr-only-focusable {
 
+  &:active,
 
+  &:focus {
 
+    position: static;
 
+    width: auto;
 
+    height: auto;
 
+    margin: 0;
 
+    overflow: visible;
 
+    clip: auto;
 
+  }
 
+}

+ 5 - 0
assets/font-awesome/scss/_screen-reader.scss
View File 

@@ -0,0 +1,5 @@
 
+// Screen Readers
 
+// -------------------------
 
+
 
+.sr-only { @include sr-only(); }
 
+.sr-only-focusable { @include sr-only-focusable(); }

+ 29 - 2
assets/font-awesome/scss/_variables.scss
View File 

@@ -4,9 +4,9 @@
 
 $fa-font-path:        "../fonts" !default;
 
 $fa-font-path:        "../fonts" !default;
 
 $fa-font-size-base:   14px !default;
 
 $fa-font-size-base:   14px !default;
 
 $fa-line-height-base: 1 !default;
 
 $fa-line-height-base: 1 !default;
 
-//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts" !default; // for referencing Bootstrap CDN font files directly
 
+//$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.6.0/fonts" !default; // for referencing Bootstrap CDN font files directly
 
 $fa-css-prefix:       fa !default;
 
 $fa-css-prefix:       fa !default;
 
-$fa-version:          "4.5.0" !default;
 
+$fa-version:          "4.6.0" !default;
 
 $fa-border-color:     #eee !default;
 
 $fa-border-color:     #eee !default;
 
 $fa-inverse:          #fff !default;
 
 $fa-inverse:          #fff !default;
 
 $fa-li-width:         (30em / 14) !default;
 
 $fa-li-width:         (30em / 14) !default;
 
@@ -20,6 +20,7 @@ $fa-var-align-left: "\f036";
 
 $fa-var-align-right: "\f038";
 
 $fa-var-align-right: "\f038";
 
 $fa-var-amazon: "\f270";
 
 $fa-var-amazon: "\f270";
 
 $fa-var-ambulance: "\f0f9";
 
 $fa-var-ambulance: "\f0f9";
 
+$fa-var-american-sign-language-interpreting: "\f2a3";
 
 $fa-var-anchor: "\f13d";
 
 $fa-var-anchor: "\f13d";
 
 $fa-var-android: "\f17b";
 
 $fa-var-android: "\f17b";
 
 $fa-var-angellist: "\f209";
 
 $fa-var-angellist: "\f209";
 
@@ -50,8 +51,11 @@ $fa-var-arrows: "\f047";
 
 $fa-var-arrows-alt: "\f0b2";
 
 $fa-var-arrows-alt: "\f0b2";
 
 $fa-var-arrows-h: "\f07e";
 
 $fa-var-arrows-h: "\f07e";
 
 $fa-var-arrows-v: "\f07d";
 
 $fa-var-arrows-v: "\f07d";
 
+$fa-var-asl-interpreting: "\f2a3";
 
+$fa-var-assistive-listening-systems: "\f2a2";
 
 $fa-var-asterisk: "\f069";
 
 $fa-var-asterisk: "\f069";
 
 $fa-var-at: "\f1fa";
 
 $fa-var-at: "\f1fa";
 
+$fa-var-audio-description: "\f29e";
 
 $fa-var-automobile: "\f1b9";
 
 $fa-var-automobile: "\f1b9";
 
 $fa-var-backward: "\f04a";
 
 $fa-var-backward: "\f04a";
 
 $fa-var-balance-scale: "\f24e";
 
 $fa-var-balance-scale: "\f24e";
 
@@ -86,6 +90,7 @@ $fa-var-bitbucket: "\f171";
 
 $fa-var-bitbucket-square: "\f172";
 
 $fa-var-bitbucket-square: "\f172";
 
 $fa-var-bitcoin: "\f15a";
 
 $fa-var-bitcoin: "\f15a";
 
 $fa-var-black-tie: "\f27e";
 
 $fa-var-black-tie: "\f27e";
 
+$fa-var-blind: "\f29d";
 
 $fa-var-bluetooth: "\f293";
 
 $fa-var-bluetooth: "\f293";
 
 $fa-var-bluetooth-b: "\f294";
 
 $fa-var-bluetooth-b: "\f294";
 
 $fa-var-bold: "\f032";
 
 $fa-var-bold: "\f032";
 
@@ -94,6 +99,7 @@ $fa-var-bomb: "\f1e2";
 
 $fa-var-book: "\f02d";
 
 $fa-var-book: "\f02d";
 
 $fa-var-bookmark: "\f02e";
 
 $fa-var-bookmark: "\f02e";
 
 $fa-var-bookmark-o: "\f097";
 
 $fa-var-bookmark-o: "\f097";
 
+$fa-var-braille: "\f2a1";
 
 $fa-var-briefcase: "\f0b1";
 
 $fa-var-briefcase: "\f0b1";
 
 $fa-var-btc: "\f15a";
 
 $fa-var-btc: "\f15a";
 
 $fa-var-bug: "\f188";
 
 $fa-var-bug: "\f188";
 
@@ -196,6 +202,8 @@ $fa-var-cutlery: "\f0f5";
 
 $fa-var-dashboard: "\f0e4";
 
 $fa-var-dashboard: "\f0e4";
 
 $fa-var-dashcube: "\f210";
 
 $fa-var-dashcube: "\f210";
 
 $fa-var-database: "\f1c0";
 
 $fa-var-database: "\f1c0";
 
+$fa-var-deaf: "\f2a4";
 
+$fa-var-deafness: "\f2a4";
 
 $fa-var-dedent: "\f03b";
 
 $fa-var-dedent: "\f03b";
 
 $fa-var-delicious: "\f1a5";
 
 $fa-var-delicious: "\f1a5";
 
 $fa-var-desktop: "\f108";
 
 $fa-var-desktop: "\f108";
 
@@ -217,6 +225,7 @@ $fa-var-empire: "\f1d1";
 
 $fa-var-envelope: "\f0e0";
 
 $fa-var-envelope: "\f0e0";
 
 $fa-var-envelope-o: "\f003";
 
 $fa-var-envelope-o: "\f003";
 
 $fa-var-envelope-square: "\f199";
 
 $fa-var-envelope-square: "\f199";
 
+$fa-var-envira: "\f299";
 
 $fa-var-eraser: "\f12d";
 
 $fa-var-eraser: "\f12d";
 
 $fa-var-eur: "\f153";
 
 $fa-var-eur: "\f153";
 
 $fa-var-euro: "\f153";
 
 $fa-var-euro: "\f153";
 
@@ -300,8 +309,11 @@ $fa-var-git-square: "\f1d2";
 
 $fa-var-github: "\f09b";
 
 $fa-var-github: "\f09b";
 
 $fa-var-github-alt: "\f113";
 
 $fa-var-github-alt: "\f113";
 
 $fa-var-github-square: "\f092";
 
 $fa-var-github-square: "\f092";
 
+$fa-var-gitlab: "\f296";
 
 $fa-var-gittip: "\f184";
 
 $fa-var-gittip: "\f184";
 
 $fa-var-glass: "\f000";
 
 $fa-var-glass: "\f000";
 
+$fa-var-glide: "\f2a5";
 
+$fa-var-glide-g: "\f2a6";
 
 $fa-var-globe: "\f0ac";
 
 $fa-var-globe: "\f0ac";
 
 $fa-var-google: "\f1a0";
 
 $fa-var-google: "\f1a0";
 
 $fa-var-google-plus: "\f0d5";
 
 $fa-var-google-plus: "\f0d5";
 
@@ -325,6 +337,7 @@ $fa-var-hand-rock-o: "\f255";
 
 $fa-var-hand-scissors-o: "\f257";
 
 $fa-var-hand-scissors-o: "\f257";
 
 $fa-var-hand-spock-o: "\f259";
 
 $fa-var-hand-spock-o: "\f259";
 
 $fa-var-hand-stop-o: "\f256";
 
 $fa-var-hand-stop-o: "\f256";
 
+$fa-var-hard-of-hearing: "\f2a4";
 
 $fa-var-hashtag: "\f292";
 
 $fa-var-hashtag: "\f292";
 
 $fa-var-hdd-o: "\f0a0";
 
 $fa-var-hdd-o: "\f0a0";
 
 $fa-var-header: "\f1dc";
 
 $fa-var-header: "\f1dc";
 
@@ -397,6 +410,7 @@ $fa-var-long-arrow-down: "\f175";
 
 $fa-var-long-arrow-left: "\f177";
 
 $fa-var-long-arrow-left: "\f177";
 
 $fa-var-long-arrow-right: "\f178";
 
 $fa-var-long-arrow-right: "\f178";
 
 $fa-var-long-arrow-up: "\f176";
 
 $fa-var-long-arrow-up: "\f176";
 
+$fa-var-low-vision: "\f2a8";
 
 $fa-var-magic: "\f0d0";
 
 $fa-var-magic: "\f0d0";
 
 $fa-var-magnet: "\f076";
 
 $fa-var-magnet: "\f076";
 
 $fa-var-mail-forward: "\f064";
 
 $fa-var-mail-forward: "\f064";
 
@@ -490,6 +504,7 @@ $fa-var-qq: "\f1d6";
 
 $fa-var-qrcode: "\f029";
 
 $fa-var-qrcode: "\f029";
 
 $fa-var-question: "\f128";
 
 $fa-var-question: "\f128";
 
 $fa-var-question-circle: "\f059";
 
 $fa-var-question-circle: "\f059";
 
+$fa-var-question-circle-o: "\f29c";
 
 $fa-var-quote-left: "\f10d";
 
 $fa-var-quote-left: "\f10d";
 
 $fa-var-quote-right: "\f10e";
 
 $fa-var-quote-right: "\f10e";
 
 $fa-var-ra: "\f1d0";
 
 $fa-var-ra: "\f1d0";
 
@@ -544,8 +559,10 @@ $fa-var-shopping-bag: "\f290";
 
 $fa-var-shopping-basket: "\f291";
 
 $fa-var-shopping-basket: "\f291";
 
 $fa-var-shopping-cart: "\f07a";
 
 $fa-var-shopping-cart: "\f07a";
 
 $fa-var-sign-in: "\f090";
 
 $fa-var-sign-in: "\f090";
 
+$fa-var-sign-language: "\f2a7";
 
 $fa-var-sign-out: "\f08b";
 
 $fa-var-sign-out: "\f08b";
 
 $fa-var-signal: "\f012";
 
 $fa-var-signal: "\f012";
 
+$fa-var-signing: "\f2a7";
 
 $fa-var-simplybuilt: "\f215";
 
 $fa-var-simplybuilt: "\f215";
 
 $fa-var-sitemap: "\f0e8";
 
 $fa-var-sitemap: "\f0e8";
 
 $fa-var-skyatlas: "\f216";
 
 $fa-var-skyatlas: "\f216";
 
@@ -554,6 +571,9 @@ $fa-var-slack: "\f198";
 
 $fa-var-sliders: "\f1de";
 
 $fa-var-sliders: "\f1de";
 
 $fa-var-slideshare: "\f1e7";
 
 $fa-var-slideshare: "\f1e7";
 
 $fa-var-smile-o: "\f118";
 
 $fa-var-smile-o: "\f118";
 
+$fa-var-snapchat: "\f2ab";
 
+$fa-var-snapchat-ghost: "\f2ac";
 
+$fa-var-snapchat-square: "\f2ad";
 
 $fa-var-soccer-ball-o: "\f1e3";
 
 $fa-var-soccer-ball-o: "\f1e3";
 
 $fa-var-sort: "\f0dc";
 
 $fa-var-sort: "\f0dc";
 
 $fa-var-sort-alpha-asc: "\f15d";
 
 $fa-var-sort-alpha-asc: "\f15d";
 
@@ -655,6 +675,7 @@ $fa-var-twitter-square: "\f081";
 
 $fa-var-umbrella: "\f0e9";
 
 $fa-var-umbrella: "\f0e9";
 
 $fa-var-underline: "\f0cd";
 
 $fa-var-underline: "\f0cd";
 
 $fa-var-undo: "\f0e2";
 
 $fa-var-undo: "\f0e2";
 
+$fa-var-universal-access: "\f29a";
 
 $fa-var-university: "\f19c";
 
 $fa-var-university: "\f19c";
 
 $fa-var-unlink: "\f127";
 
 $fa-var-unlink: "\f127";
 
 $fa-var-unlock: "\f09c";
 
 $fa-var-unlock: "\f09c";
 
@@ -673,11 +694,14 @@ $fa-var-venus: "\f221";
 
 $fa-var-venus-double: "\f226";
 
 $fa-var-venus-double: "\f226";
 
 $fa-var-venus-mars: "\f228";
 
 $fa-var-venus-mars: "\f228";
 
 $fa-var-viacoin: "\f237";
 
 $fa-var-viacoin: "\f237";
 
+$fa-var-viadeo: "\f2a9";
 
+$fa-var-viadeo-square: "\f2aa";
 
 $fa-var-video-camera: "\f03d";
 
 $fa-var-video-camera: "\f03d";
 
 $fa-var-vimeo: "\f27d";
 
 $fa-var-vimeo: "\f27d";
 
 $fa-var-vimeo-square: "\f194";
 
 $fa-var-vimeo-square: "\f194";
 
 $fa-var-vine: "\f1ca";
 
 $fa-var-vine: "\f1ca";
 
 $fa-var-vk: "\f189";
 
 $fa-var-vk: "\f189";
 
+$fa-var-volume-control-phone: "\f2a0";
 
 $fa-var-volume-down: "\f027";
 
 $fa-var-volume-down: "\f027";
 
 $fa-var-volume-off: "\f026";
 
 $fa-var-volume-off: "\f026";
 
 $fa-var-volume-up: "\f028";
 
 $fa-var-volume-up: "\f028";
 
@@ -687,11 +711,14 @@ $fa-var-weibo: "\f18a";
 
 $fa-var-weixin: "\f1d7";
 
 $fa-var-weixin: "\f1d7";
 
 $fa-var-whatsapp: "\f232";
 
 $fa-var-whatsapp: "\f232";
 
 $fa-var-wheelchair: "\f193";
 
 $fa-var-wheelchair: "\f193";
 
+$fa-var-wheelchair-alt: "\f29b";
 
 $fa-var-wifi: "\f1eb";
 
 $fa-var-wifi: "\f1eb";
 
 $fa-var-wikipedia-w: "\f266";
 
 $fa-var-wikipedia-w: "\f266";
 
 $fa-var-windows: "\f17a";
 
 $fa-var-windows: "\f17a";
 
 $fa-var-won: "\f159";
 
 $fa-var-won: "\f159";
 
 $fa-var-wordpress: "\f19a";
 
 $fa-var-wordpress: "\f19a";
 
+$fa-var-wpbeginner: "\f297";
 
+$fa-var-wpforms: "\f298";
 
 $fa-var-wrench: "\f0ad";
 
 $fa-var-wrench: "\f0ad";
 
 $fa-var-xing: "\f168";
 
 $fa-var-xing: "\f168";
 
 $fa-var-xing-square: "\f169";
 
 $fa-var-xing-square: "\f169";

+ 2 - 1
assets/font-awesome/scss/font-awesome.scss
View File 

@@ -1,5 +1,5 @@
 
 /*!
 
 /*!
 
- *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
 
+ *  Font Awesome 4.6.0 by @davegandy - http://fontawesome.io - @fontawesome
 
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 
  */
 
  */
 
 
 
@@ -15,3 +15,4 @@
 
 @import "rotated-flipped";
 
 @import "rotated-flipped";
 
 @import "stacked";
 
 @import "stacked";
 
 @import "icons";
 
 @import "icons";
 
+@import "screen-reader";

+ 1 - 1
assets/less/site/bootstrap/navbar.less
View File 

@@ -39,7 +39,7 @@
 
 
 
 
 
 //
 
 //
 
-// FONTICONS ORG NAVBAR
 
+// FORT AWESOME ORG NAVBAR
 
 // --------------------
 
 // --------------------
 
 //
 
 //
 
 .navbar-org {
 
 .navbar-org {

+ 2 - 2
assets/less/site/responsive/screen-lg.less
View File 

@@ -49,10 +49,10 @@
 
     line-height: 36px;
 
     line-height: 36px;
 
   }
 
   }
 
 
 
-  .fonticons {
 
+  .fort-awesome {
 
     .tagline {  }
 
     .tagline {  }
 
     .action { width: 18%; }
 
     .action { width: 18%; }
 
   }
 
   }
 
 
 
   .hide-lg { display: none; }
 
   .hide-lg { display: none; }
 
-}
 
+}

+ 1 - 1
assets/less/site/responsive/screen-sm.less
View File 

@@ -39,7 +39,7 @@
 
     font-size: 19px;
 
     font-size: 19px;
 
   }
 
   }
 
 
 
-  .fonticons {
 
+  .fort-awesome {
 
     .action { width: 33%; }
 
     .action { width: 33%; }
 
   }
 
   }

File diff suppressed because it is too large
+ 178 - 121
cheatsheet/index.html


+ 40 - 31
community/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../whats-new/">New</a>
 
           <a href="../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../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="../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../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="../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../examples/">Examples</a></li>
 
             <li><a href="../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../examples/#list">List Icons</a></li>
 
             <li><a href="../examples/#list">List Icons</a></li>
 
             <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../accessibility/">Accessibility</a></li>
 
         <li class="active"><a href="../community/">Community</a></li>
 
         <li class="active"><a href="../community/">Community</a></li>
 
         <li><a href="../license/">License</a></li>
 
         <li><a href="../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -162,7 +171,7 @@
 
 
 
 <div class="jumbotron jumbotron-ad hidden-print">
 
 <div class="jumbotron jumbotron-ad hidden-print">
 
   <div class="container">
 
   <div class="container">
 
-    <h1><i class="fa fa-thumbs-o-up"></i>&nbsp; Community</h1>
 
+    <h1><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp; Community</h1>
 
     <p>Lots of ways to get involved with Font Awesome</p>
 
     <p>Lots of ways to get involved with Font Awesome</p>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -180,7 +189,7 @@
 
           <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
 
           <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-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.">
 
               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"></i>
 
+            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
 
           </button>
 
           </button>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -272,7 +281,7 @@
 
       </ul>
 
       </ul>
 
     </li>
 
     </li>
 
     <li>
 
     <li>
 
-      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"></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>
 
     </li>
 
   </ol>
 
   </ol>
 
 </section>
 
 </section>
 
@@ -338,7 +347,7 @@
 
     </div>
 
     </div>
 
     <div class="col-md-4 col-sm-4">
 
     <div class="col-md-4 col-sm-4">
 
       <p>
 
       <p>
 
-        Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn">&nbsp;</i>MaxCDN</a> for providing the excellent
 
+        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="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
 
         <a href="../get-started/#bootstrapcdn">get started</a> with Font Awesome.
 
         <a href="../get-started/#bootstrapcdn">get started</a> with Font Awesome.
 
       </p>
 
       </p>
 
@@ -354,7 +363,7 @@
 
   </p>
 
   </p>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-6 col-sm-6">
 
     <div class="col-md-6 col-sm-6">
 
-      <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm"></i>Tip me on Gittip</a></h3>
 
+      <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>
 
       <p>
 
         Gittip is a great way to let developers know you appreciate their work.
 
         Gittip is a great way to let developers know you appreciate their work.
 
       </p>
 
       </p>
 
@@ -393,7 +402,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 270 - 117
examples/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../whats-new/">New</a>
 
           <a href="../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../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="../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../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="../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left active"><a href="../examples/">Examples</a></li>
 
         <li class="dropdown-split-left active"><a href="../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs active">
 
         <li class="dropdown dropdown-split-right hidden-xs active">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../examples/">Examples</a></li>
 
             <li><a href="../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../examples/#list">List Icons</a></li>
 
             <li><a href="../examples/#list">List Icons</a></li>
 
             <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../accessibility/">Accessibility</a></li>
 
         <li><a href="../community/">Community</a></li>
 
         <li><a href="../community/">Community</a></li>
 
         <li><a href="../license/">License</a></li>
 
         <li><a href="../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -162,7 +171,7 @@
 
 
 
 <div class="jumbotron jumbotron-ad hidden-print">
 
 <div class="jumbotron jumbotron-ad hidden-print">
 
   <div class="container">
 
   <div class="container">
 
-    <h1><i class="fa fa-magic"></i>&nbsp; Examples</h1>
 
+    <h1><i class="fa fa-magic" aria-hidden="true"></i>&nbsp; Examples</h1>
 
     <p>Lots of easy ways to use Font Awesome</p>
 
     <p>Lots of easy ways to use Font Awesome</p>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -180,7 +189,7 @@
 
           <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
 
           <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-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.">
 
               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"></i>
 
+            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
 
           </button>
 
           </button>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -225,15 +234,17 @@
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     Basic Icons
 
     Basic Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/core.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_core.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/core.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_core.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
 
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <p>
 
       <p>
 
-        <i class="fa fa-camera-retro"></i> fa-camera-retro
 
+        <i class="fa fa-camera-retro" aria-hidden="true"></i>
 
+        <span class="sr-only">Example: basic icon</span>
 
+        fa-camera-retro
 
       </p>
 
       </p>
 
     </div>
 
     </div>
 
     <div class="col-md-9 col-sm-8">
 
     <div class="col-md-9 col-sm-8">
 
@@ -242,12 +253,13 @@
 
         name. Font Awesome is designed to be used with inline elements (we like the <code>&lt;i&gt;</code> tag for
 
         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).
 
         brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
 
       </p>
 
       </p>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-camera-retro&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> fa-camera-retro
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-camera-retro&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> fa-camera-retro
 
 </code></pre></div>
 
 </code></pre></div>
 
       <div class="alert alert-success">
 
       <div class="alert alert-success">
 
         <ul class="fa-ul">
 
         <ul class="fa-ul">
 
           <li>
 
           <li>
 
-            <i class="fa fa-info-circle fa-lg fa-li"></i>
 
+            <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,
 
             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.
 
             drop shadow, and anything else that gets inherited using CSS.
 
           </li>
 
           </li>
 
@@ -261,17 +273,17 @@
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     Larger Icons
 
     Larger Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/larger.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_larger.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/larger.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_larger.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
-      <p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
 
-      <p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
 
-      <p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
 
-      <p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
 
-      <p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
 
+      <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>
 
     <div class="col-md-9 col-sm-8">
 
     <div class="col-md-9 col-sm-8">
 
       <p>
 
       <p>
 
@@ -301,17 +313,17 @@
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     Fixed Width Icons
 
     Fixed Width Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_fixed-width.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_fixed-width.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <div class="list-group">
 
       <div class="list-group">
 
-        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
 
-        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
 
-        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
 
-        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
 
+        <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>
 
     </div>
 
     <div class="col-md-9 col-sm-8">
 
     <div class="col-md-9 col-sm-8">
 
@@ -320,10 +332,10 @@
 
         Especially useful in things like nav lists &amp; list groups.
 
         Especially useful in things like nav lists &amp; list groups.
 
       </p>
 
       </p>
 
 <div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;list-group&quot;</span><span class="nt">&gt;</span>
 
 <div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;list-group&quot;</span><span class="nt">&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-home fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Home<span class="nt">&lt;/a&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-book fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Library<span class="nt">&lt;/a&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-pencil fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Applications<span class="nt">&lt;/a&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Settings<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-home fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Home<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-book fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Library<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-pencil fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Applications<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;list-group-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span><span class="ni">&amp;nbsp;</span> Settings<span class="nt">&lt;/a&gt;</span>
 
 <span class="nt">&lt;/div&gt;</span>
 
 <span class="nt">&lt;/div&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
     </div>
 
     </div>
 
@@ -334,26 +346,26 @@
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     List Icons
 
     List Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/list.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_list.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/list.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_list.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <ul class="fa-ul">
 
       <ul class="fa-ul">
 
-        <li><i class="fa-li fa fa-check-square"></i>List icons</li>
 
-        <li><i class="fa-li fa fa-check-square"></i>can be used</li>
 
-        <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
 
-        <li><i class="fa-li fa fa-square"></i>in lists</li>
 
+        <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>
 
       </ul>
 
     </div>
 
     </div>
 
     <div class="col-md-9 col-sm-8">
 
     <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>
 
       <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
 
 <div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;fa-ul&quot;</span><span class="nt">&gt;</span>
 
 <div class="highlight"><pre><code class="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;fa-ul&quot;</span><span class="nt">&gt;</span>
 
-  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-check-square&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>List icons<span class="nt">&lt;/li&gt;</span>
 
-  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-check-square&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>can be used<span class="nt">&lt;/li&gt;</span>
 
-  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-spinner fa-spin&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>as bullets<span class="nt">&lt;/li&gt;</span>
 
-  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-square&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>in lists<span class="nt">&lt;/li&gt;</span>
 
+  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-check-square&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>List icons<span class="nt">&lt;/li&gt;</span>
 
+  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-check-square&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>can be used<span class="nt">&lt;/li&gt;</span>
 
+  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-spinner fa-spin&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>as bullets<span class="nt">&lt;/li&gt;</span>
 
+  <span class="nt">&lt;li&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa-li fa fa-square&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>in lists<span class="nt">&lt;/li&gt;</span>
 
 <span class="nt">&lt;/ul&gt;</span>
 
 <span class="nt">&lt;/ul&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
     </div>
 
     </div>
 
@@ -362,16 +374,16 @@
 
 
 
   <section id="bordered-pulled">
 
   <section id="bordered-pulled">
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
-    Bordered & Pulled Icons
 
+    Bordered &amp; Pulled Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <p>
 
       <p>
 
-        <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
 
+        <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—
 
         &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.
 
         So we beat on, boats against the current, borne back ceaselessly into the past.
 
       </p>
 
       </p>
 
@@ -381,7 +393,7 @@
 
         Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code> for easy pull quotes or
 
         Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code> for easy pull quotes or
 
         article icons.
 
         article icons.
 
       </p>
 
       </p>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-quote-left fa-3x fa-pull-left fa-border&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-quote-left fa-3x fa-pull-left fa-border&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 ...tomorrow we will run faster, stretch out our arms farther...
 
 ...tomorrow we will run faster, stretch out our arms farther...
 
 And then one fine morning— So we beat on, boats against the
 
 And then one fine morning— So we beat on, boats against the
 
 current, borne back ceaselessly into the past.
 
 current, borne back ceaselessly into the past.
 
@@ -394,18 +406,27 @@ current, borne back ceaselessly into the past.
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     Animated Icons
 
     Animated Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/animated.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_animated.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/animated.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_animated.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <p>
 
       <p>
 
         <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
 
         <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>
 
         <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>
 
         <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>
 
         <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>
 
         <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>
 
       </p>
 
     </div>
 
     </div>
 
     <div class="col-md-9 col-sm-8">
 
     <div class="col-md-9 col-sm-8">
 
@@ -413,42 +434,156 @@ current, borne back ceaselessly into the past.
 
         Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
 
         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>.
 
         with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
 
       </p>
 
       </p>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-spinner fa-spin&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
-<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-circle-o-notch fa-spin&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
-<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-refresh fa-spin&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
-<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog fa-spin&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
-<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-spinner fa-pulse&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-spinner fa-spin fa-3x fa-fw margin-bottom&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Loading...<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Loading...<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-refresh fa-spin fa-3x fa-fw margin-bottom&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Loading...<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog fa-spin fa-3x fa-fw margin-bottom&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Loading...<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Loading...<span class="nt">&lt;/span&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
       <p class="alert alert-success">
 
       <p class="alert alert-success">
 
-        <i class="fa fa-exclamation-triangle fa-lg"></i> 
-        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> 
+        <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.
 
         for examples and possible workarounds.
 
       </p>
 
       </p>
 
       <p class="alert alert-success">
 
       <p class="alert alert-success">
 
-        <i class="fa fa-info-circle fa-lg"></i> CSS3 animations aren't supported in IE8 - IE9.
 
+        <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>
 
       </p>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </section>
 
 </section>
 
 
 
+  <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="../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>
 
+
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog&quot;</span> <span class="na">title=</span><span class="s">&quot;Settings&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+
 
+<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;path/to/settings&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o&quot;</span> <span class="na">title=</span><span class="s">&quot;Delete&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Delete<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+
 
+<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">href=</span><span class="s">&quot;#navigation-main&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span> <span class="na">title=</span><span class="s">&quot;Skip to main navigation&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Skip to main navigation<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+</code></pre></div>
 
+
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-refresh fa-spin fa-3x fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="err">&lt;/</span><span class="na">i</span><span class="nt">&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Refreshing...<span class="nt">&lt;/span&gt;</span>
 
+
 
+<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog fa-spin fa-3x fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Saving. Hang tight!<span class="nt">&lt;/span&gt;</span>
 
+</code></pre></div>
 
+
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group margin-bottom-sm&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;input-group-addon&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-envelope-o fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
 
+  <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Email address&quot;</span><span class="nt">&gt;</span>
 
+<span class="nt">&lt;/div&gt;</span>
 
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;input-group-addon&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-key fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;&lt;/span&gt;</span>
 
+  <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;form-control&quot;</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Password&quot;</span><span class="nt">&gt;</span>
 
+<span class="nt">&lt;/div&gt;</span>
 
+</code></pre></div>
 
+
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;path/to/shopping/cart&quot;</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="nt">&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-shopping-cart&quot;</span> <span class="na">title=</span><span class="s">&quot;View 3 items in your shopping cart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>View 3 items in your shopping cart<span class="nt">&lt;/span&gt;</span>
 
+<span class="nt">&lt;/a&gt;</span>
 
+</code></pre></div>
 
+
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-half&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;sr-only&quot;</span><span class="nt">&gt;</span>Battery level: 50%<span class="nt">&lt;/span&gt;</span>
 
+</code></pre></div>
 
+    </div>
 
+  </div>
 
+</section>
 
+
 
   <section id="rotated-flipped">
 
   <section id="rotated-flipped">
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     Rotated &amp; Flipped
 
     Rotated &amp; Flipped
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <p style="font-size: 18px;">
 
       <p style="font-size: 18px;">
 
-        <i class="fa fa-shield"></i>&nbsp; normal<br>
 
-        <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
 
-        <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
 
-        <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
 
-        <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
 
-        <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
 
+        <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>
 
       </p>
 
     </div>
 
     </div>
 
     <div class="col-md-9 col-sm-8">
 
     <div class="col-md-9 col-sm-8">
 
@@ -470,29 +605,29 @@ current, borne back ceaselessly into the past.
 
   <h2 class="page-header">
 
   <h2 class="page-header">
 
     Stacked Icons
 
     Stacked Icons
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
     <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/less/stacked.less" class="text-muted padding-right">View LESS</a>
 
-      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.5.0/scss/_stacked.scss" class="text-muted">View SASS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/less/stacked.less" class="text-muted padding-right">View LESS</a>
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.0/scss/_stacked.scss" class="text-muted">View SASS</a>
 
     </div>
 
     </div>
 
   </h2>
 
   </h2>
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <div class="margin-bottom">
 
       <div class="margin-bottom">
 
-        <span class="fa-stack fa-lg">
 
+        <span class="fa-stack fa-lg" aria-hidden="true">
 
           <i class="fa fa-square-o fa-stack-2x"></i>
 
           <i class="fa fa-square-o fa-stack-2x"></i>
 
           <i class="fa fa-twitter fa-stack-1x"></i>
 
           <i class="fa fa-twitter fa-stack-1x"></i>
 
         </span>
 
         </span>
 
         fa-twitter on fa-square-o<br>
 
         fa-twitter on fa-square-o<br>
 
-        <span class="fa-stack fa-lg">
 
+        <span class="fa-stack fa-lg" aria-hidden="true">
 
           <i class="fa fa-circle fa-stack-2x"></i>
 
           <i class="fa fa-circle fa-stack-2x"></i>
 
           <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
 
           <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
 
         </span>
 
         </span>
 
         fa-flag on fa-circle<br>
 
         fa-flag on fa-circle<br>
 
-        <span class="fa-stack fa-lg">
 
+        <span class="fa-stack fa-lg" aria-hidden="true">
 
           <i class="fa fa-square fa-stack-2x"></i>
 
           <i class="fa fa-square fa-stack-2x"></i>
 
           <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
 
           <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
 
         </span>
 
         </span>
 
         fa-terminal on fa-square<br>
 
         fa-terminal on fa-square<br>
 
-        <span class="fa-stack fa-lg">
 
+        <span class="fa-stack fa-lg" aria-hidden="true">
 
           <i class="fa fa-camera fa-stack-1x"></i>
 
           <i class="fa fa-camera fa-stack-1x"></i>
 
           <i class="fa fa-ban fa-stack-2x text-danger"></i>
 
           <i class="fa fa-ban fa-stack-2x text-danger"></i>
 
         </span>
 
         </span>
 
@@ -537,43 +672,52 @@ fa-ban on fa-camera
 
     <div class="col-md-3 col-sm-4">
 
     <div class="col-md-3 col-sm-4">
 
       <p>
 
       <p>
 
         <a class="btn btn-danger" href="#">
 
         <a class="btn btn-danger" href="#">
 
-          <i class="fa fa-trash-o fa-lg"></i> Delete</a>
 
+          <i class="fa fa-trash-o fa-lg"  aria-hidden="true"></i> Delete</a>
 
         <a class="btn btn-default btn-sm" href="#">
 
         <a class="btn btn-default btn-sm" href="#">
 
-          <i class="fa fa-cog"></i> Settings</a>
 
+          <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
 
       </p>
 
       </p>
 
       <p>
 
       <p>
 
         <a class="btn btn-lg btn-success" href="#">
 
         <a class="btn btn-lg btn-success" href="#">
 
-          <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.5.0</a>
 
+          <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version 4.6.0</a>
 
       </p>
 
       </p>
 
       <div class="margin-bottom">
 
       <div class="margin-bottom">
 
         <div class="btn-group">
 
         <div class="btn-group">
 
-          <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
 
-          <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
 
-          <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
 
-          <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
 
+          <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>
 
       </div>
 
       <div class="margin-bottom">
 
       <div class="margin-bottom">
 
         <div class="input-group margin-bottom-sm">
 
         <div class="input-group margin-bottom-sm">
 
-          <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
 
+          <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">
 
           <input class="form-control" type="text" placeholder="Email address">
 
         </div>
 
         </div>
 
         <div class="input-group">
 
         <div class="input-group">
 
-          <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
 
+          <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">
 
           <input class="form-control" type="password" placeholder="Password">
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
       <div class="margin-bottom">
 
       <div class="margin-bottom">
 
         <div class="btn-group open">
 
         <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" 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="#">
 
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 
-            <span class="fa fa-caret-down"></span></a>
 
+            <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
 
+          </a>
 
           <ul class="dropdown-menu">
 
           <ul class="dropdown-menu">
 
-            <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
 
-            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
 
-            <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
 
+            <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 class="divider"></li>
 
-            <li><a href="#"><i class="i"></i> Make admin</a></li>
 
+            <li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
 
           </ul>
 
           </ul>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -584,18 +728,26 @@ fa-ban on fa-camera
 
         Font Awesome works great with the full range of Bootstrap components.
 
         Font Awesome works great with the full range of Bootstrap components.
 
       </p>
 
       </p>
 
 <div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
 <div class="highlight"><pre><code class="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-danger&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
-  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o fa-lg&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Delete<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o fa-lg&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Delete<span class="nt">&lt;/a&gt;</span>
 
 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default btn-sm&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default btn-sm&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
-  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Settings<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-cog&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Settings<span class="nt">&lt;/a&gt;</span>
 
 
 
 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-lg btn-success&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
 <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-lg btn-success&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
-  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-flag fa-2x pull-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Font Awesome<span class="nt">&lt;br&gt;</span>Version 4.5.0<span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-flag fa-2x pull-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Font Awesome<span class="nt">&lt;br&gt;</span>Version 4.6.0<span class="nt">&lt;/a&gt;</span>
 
 
 
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;btn-group&quot;</span><span class="nt">&gt;</span>
 
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;btn-group&quot;</span><span class="nt">&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-left&quot;</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-center&quot;</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-right&quot;</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
 
-  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-justify&quot;</span><span class="nt">&gt;&lt;/i&gt;&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
+    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-left&quot;</span> <span class="na">title=</span><span class="s">&quot;Align Left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
+    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-center&quot;</span> <span class="na">title=</span><span class="s">&quot;Align Center&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
+    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-right&quot;</span> <span class="na">title=</span><span class="s">&quot;Align Right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;/a&gt;</span>
 
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-default&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
+    <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-justify&quot;</span> <span class="na">title=</span><span class="s">&quot;Align Justify&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+  <span class="nt">&lt;/a&gt;</span>
 
 <span class="nt">&lt;/div&gt;</span>
 
 <span class="nt">&lt;/div&gt;</span>
 
 
 
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group margin-bottom-sm&quot;</span><span class="nt">&gt;</span>
 
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;input-group margin-bottom-sm&quot;</span><span class="nt">&gt;</span>
 
@@ -610,13 +762,14 @@ fa-ban on fa-camera
 
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;btn-group open&quot;</span><span class="nt">&gt;</span>
 
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;btn-group open&quot;</span><span class="nt">&gt;</span>
 
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-user fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> User<span class="nt">&lt;/a&gt;</span>
 
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-user fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> User<span class="nt">&lt;/a&gt;</span>
 
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary dropdown-toggle&quot;</span> <span class="na">data-toggle=</span><span class="s">&quot;dropdown&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;btn btn-primary dropdown-toggle&quot;</span> <span class="na">data-toggle=</span><span class="s">&quot;dropdown&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;fa fa-caret-down&quot;</span><span class="nt">&gt;&lt;/span&gt;&lt;/a&gt;</span>
 
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;fa fa-caret-down&quot;</span> <span class="na">title=</span><span class="s">&quot;Toggle dropdown menu&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
 
+  <span class="nt">&lt;/a&gt;</span>
 
   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;dropdown-menu&quot;</span><span class="nt">&gt;</span>
 
   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;dropdown-menu&quot;</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-pencil fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Edit<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
-    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Delete<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
-    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-ban fa-fw&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Ban<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
+    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-pencil fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Edit<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
+    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-trash-o fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Delete<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
+    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-ban fa-fw&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Ban<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;divider&quot;</span><span class="nt">&gt;&lt;/li&gt;</span>
 
     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;divider&quot;</span><span class="nt">&gt;&lt;/li&gt;</span>
 
-    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;i&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Make admin<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
+    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-unlock&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span> Make admin<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
 
   <span class="nt">&lt;/ul&gt;</span>
 
   <span class="nt">&lt;/ul&gt;</span>
 
 <span class="nt">&lt;/div&gt;</span>
 
 <span class="nt">&lt;/div&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
@@ -665,7 +818,7 @@ fa-ban on fa-camera
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 43 - 34
get-started/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../whats-new/">New</a>
 
           <a href="../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li class="active"><a href="../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm active"><a href="../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg active">
 
+          <a href="../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../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="../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../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="../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../examples/">Examples</a></li>
 
             <li><a href="../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../examples/#list">List Icons</a></li>
 
             <li><a href="../examples/#list">List Icons</a></li>
 
             <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../accessibility/">Accessibility</a></li>
 
         <li><a href="../community/">Community</a></li>
 
         <li><a href="../community/">Community</a></li>
 
         <li><a href="../license/">License</a></li>
 
         <li><a href="../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -162,8 +171,8 @@
 
 
 
 <div class="jumbotron jumbotron-ad hidden-print">
 
 <div class="jumbotron jumbotron-ad hidden-print">
 
   <div class="container">
 
   <div class="container">
 
-    <h1><i class="fa fa-cogs"></i>&nbsp; Get Started</h1>
 
-    <p>Easy ways to get Font Awesome 4.5.0 onto your website</p>
 
+    <h1><i class="fa fa-cogs" aria-hidden="true"></i>&nbsp; Get Started</h1>
 
+    <p>Easy ways to get Font Awesome 4.6.0 onto your website</p>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
 
 
@@ -180,7 +189,7 @@
 
           <button type="submit" class="btn btn-success btn-block margin-bottom-lg"
 
           <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-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.">
 
               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"></i>
 
+            Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
 
           </button>
 
           </button>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
@@ -227,9 +236,9 @@
 
     <ol>
 
     <ol>
 
       <li>
 
       <li>
 
         Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
 
         Paste the following code into the <code>&lt;head&gt;</code> section of your site's HTML.
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&quot;</span><span class="nt">&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css&quot;</span><span class="nt">&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <p class="alert alert-success"><i class="fa fa-info-circle"></i> Immediately after release, it takes a bit of time for BootstrapCDN to catch up and get the newest version live on their CDN.</p>
 
+        <p class="alert alert-success"><i class="fa fa-info-circle" aria-hidden="true"></i> Immediately after release, it takes a bit of time for BootstrapCDN to catch up and get the newest version live on their CDN.</p>
 
       </li>
 
       </li>
 
       <li>
 
       <li>
 
         Pat yourself on the back for your scalable-vector-icons-on-the-website
 
         Pat yourself on the back for your scalable-vector-icons-on-the-website
 
@@ -317,7 +326,7 @@
 
 
 
   <section id="custom-less">
 
   <section id="custom-less">
 
     <h2 class="page-header">PRO: Custom LESS or SASS</h2>
 
     <h2 class="page-header">PRO: Custom LESS or SASS</h2>
 
-    <p>Use this method to customize Font Awesome 4.5.0 using LESS or SASS.</p>
 
+    <p>Use this method to customize Font Awesome 4.6.0 using LESS or SASS.</p>
 
     <ol>
 
     <ol>
 
       <li>Copy the <code>font-awesome/</code> directory into your project.</li>
 
       <li>Copy the <code>font-awesome/</code> directory into your project.</li>
 
       <li>
 
       <li>
 
@@ -325,7 +334,7 @@
 
         variable to point to your font directory.
 
         variable to point to your font directory.
 
 <div class="highlight"><pre><code class="scss"><span class="k">@fa-font-path</span><span class="nd">:</span>   <span class="s2">&quot;../font&quot;</span><span class="o">;</span>
 
 <div class="highlight"><pre><code class="scss"><span class="k">@fa-font-path</span><span class="nd">:</span>   <span class="s2">&quot;../font&quot;</span><span class="o">;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <p class="alert alert-success"><i class="fa fa-info-circle"></i> The font path is relative from your compiled CSS directory.</p>
 
+        <p class="alert alert-success"><i class="fa fa-info-circle" aria-hidden="true"></i> The font path is relative from your compiled CSS directory.</p>
 
       </li>
 
       </li>
 
       <li>Re-compile your LESS or SASS if using a static compiler. Otherwise, you should be good to go.</li>
 
       <li>Re-compile your LESS or SASS if using a static compiler. Otherwise, you should be good to go.</li>
 
       <li>Check out the <a href="../examples/">examples</a> to start using Font Awesome!</li>
 
       <li>Check out the <a href="../examples/">examples</a> to start using Font Awesome!</li>
 
@@ -354,7 +363,7 @@
 
   <section id="need-ie7">
 
   <section id="need-ie7">
 
     <h2 class="page-header">Need IE7 Support?</h2>
 
     <h2 class="page-header">Need IE7 Support?</h2>
 
     <p>
 
     <p>
 
-      If you need IE7 support, you have my condolences. Really. Font Awesome 4.5.0
 
+      If you need IE7 support, you have my condolences. Really. Font Awesome 4.6.0
 
       doesn't support IE7, but an older version does. You'll need to check out the
 
       doesn't support IE7, but an older version does. You'll need to check out the
 
       <a href="../3.2.1/get-started/#need-ie7">3.2.1 instructions for using IE7</a>. Then go complain to
 
       <a href="../3.2.1/get-started/#need-ie7">3.2.1 instructions for using IE7</a>. Then go complain to
 
       whomever decided your project needs IE7 support.
 
       whomever decided your project needs IE7 support.
 
@@ -393,7 +402,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/500px/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-500px fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-500px fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of 500px at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-500px fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-500px fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-500px fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-500px fa-2"></i>&nbsp;
 
+        <i class="fa fa-500px fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of 500px at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-500px fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of 500px at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-500px fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of 500px at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-500px fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of 500px at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-500px fa-1"></i>
 
+      <i class="fa fa-500px fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of 500px</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-500px
 
       fa-500px
 
       <small>
 
       <small>
 
-        <i class="fa fa-500px"></i> &middot;
 
+        <i class="fa fa-500px" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f26e</span> &middot;
 
         Unicode: <span class="upper">f26e</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-500px"></i> fa-500px
 
+            <i class="fa fa-500px" aria-hidden="true"></i><span class="sr-only">Example of 500px</span> fa-500px
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-500px&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-500px&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/adjust/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-adjust fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-adjust fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of adjust at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-adjust fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-adjust fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-adjust fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-adjust fa-2"></i>&nbsp;
 
+        <i class="fa fa-adjust fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of adjust at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-adjust fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of adjust at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-adjust fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of adjust at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-adjust fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of adjust at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-adjust fa-1"></i>
 
+      <i class="fa fa-adjust fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of adjust</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-adjust
 
       fa-adjust
 
       <small>
 
       <small>
 
-        <i class="fa fa-adjust"></i> &middot;
 
+        <i class="fa fa-adjust" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f042</span> &middot;
 
         Unicode: <span class="upper">f042</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-adjust"></i> fa-adjust
 
+            <i class="fa fa-adjust" aria-hidden="true"></i><span class="sr-only">Example of adjust</span> fa-adjust
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-adjust&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-adjust&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/adn/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-adn fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-adn fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of adn at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-adn fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-adn fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-adn fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-adn fa-2"></i>&nbsp;
 
+        <i class="fa fa-adn fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of adn at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-adn fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of adn at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-adn fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of adn at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-adn fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of adn at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-adn fa-1"></i>
 
+      <i class="fa fa-adn fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of adn</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-adn
 
       fa-adn
 
       <small>
 
       <small>
 
-        <i class="fa fa-adn"></i> &middot;
 
+        <i class="fa fa-adn" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f170</span> &middot;
 
         Unicode: <span class="upper">f170</span> &middot;
 
         Created: v3.2 &middot;
 
         Created: v3.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-adn"></i> fa-adn
 
+            <i class="fa fa-adn" aria-hidden="true"></i><span class="sr-only">Example of adn</span> fa-adn
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-adn&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-adn&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/align-center/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-align-center fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-align-center fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of align-center at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-align-center fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-align-center fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-align-center fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-align-center fa-2"></i>&nbsp;
 
+        <i class="fa fa-align-center fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-center at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-align-center fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of align-center at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-align-center fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-center at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-align-center fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-center at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-align-center fa-1"></i>
 
+      <i class="fa fa-align-center fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of align-center</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-align-center
 
       fa-align-center
 
       <small>
 
       <small>
 
-        <i class="fa fa-align-center"></i> &middot;
 
+        <i class="fa fa-align-center" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f037</span> &middot;
 
         Unicode: <span class="upper">f037</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-align-center"></i> fa-align-center
 
+            <i class="fa fa-align-center" aria-hidden="true"></i><span class="sr-only">Example of align-center</span> fa-align-center
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-center&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-center&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/align-justify/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-align-justify fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-align-justify fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of align-justify at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-align-justify fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-align-justify fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-align-justify fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-align-justify fa-2"></i>&nbsp;
 
+        <i class="fa fa-align-justify fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-justify at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-align-justify fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of align-justify at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-align-justify fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-justify at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-align-justify fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-justify at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-align-justify fa-1"></i>
 
+      <i class="fa fa-align-justify fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of align-justify</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-align-justify
 
       fa-align-justify
 
       <small>
 
       <small>
 
-        <i class="fa fa-align-justify"></i> &middot;
 
+        <i class="fa fa-align-justify" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f039</span> &middot;
 
         Unicode: <span class="upper">f039</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-align-justify"></i> fa-align-justify
 
+            <i class="fa fa-align-justify" aria-hidden="true"></i><span class="sr-only">Example of align-justify</span> fa-align-justify
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-justify&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-justify&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/align-left/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-align-left fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-align-left fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of align-left at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-align-left fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-align-left fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-align-left fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-align-left fa-2"></i>&nbsp;
 
+        <i class="fa fa-align-left fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-left at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-align-left fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of align-left at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-align-left fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-left at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-align-left fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-left at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-align-left fa-1"></i>
 
+      <i class="fa fa-align-left fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of align-left</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-align-left
 
       fa-align-left
 
       <small>
 
       <small>
 
-        <i class="fa fa-align-left"></i> &middot;
 
+        <i class="fa fa-align-left" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f036</span> &middot;
 
         Unicode: <span class="upper">f036</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-align-left"></i> fa-align-left
 
+            <i class="fa fa-align-left" aria-hidden="true"></i><span class="sr-only">Example of align-left</span> fa-align-left
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/align-right/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-align-right fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-align-right fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of align-right at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-align-right fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-align-right fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-align-right fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-align-right fa-2"></i>&nbsp;
 
+        <i class="fa fa-align-right fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-right at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-align-right fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of align-right at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-align-right fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-right at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-align-right fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of align-right at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-align-right fa-1"></i>
 
+      <i class="fa fa-align-right fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of align-right</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-align-right
 
       fa-align-right
 
       <small>
 
       <small>
 
-        <i class="fa fa-align-right"></i> &middot;
 
+        <i class="fa fa-align-right" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f038</span> &middot;
 
         Unicode: <span class="upper">f038</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-align-right"></i> fa-align-right
 
+            <i class="fa fa-align-right" aria-hidden="true"></i><span class="sr-only">Example of align-right</span> fa-align-right
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-align-right&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/amazon/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-amazon fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-amazon fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of amazon at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-amazon fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-amazon fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-amazon fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-amazon fa-2"></i>&nbsp;
 
+        <i class="fa fa-amazon fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of amazon at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-amazon fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of amazon at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-amazon fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of amazon at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-amazon fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of amazon at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-amazon fa-1"></i>
 
+      <i class="fa fa-amazon fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of amazon</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-amazon
 
       fa-amazon
 
       <small>
 
       <small>
 
-        <i class="fa fa-amazon"></i> &middot;
 
+        <i class="fa fa-amazon" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f270</span> &middot;
 
         Unicode: <span class="upper">f270</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-amazon"></i> fa-amazon
 
+            <i class="fa fa-amazon" aria-hidden="true"></i><span class="sr-only">Example of amazon</span> fa-amazon
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-amazon&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-amazon&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/ambulance/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-ambulance fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-ambulance fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of ambulance at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-ambulance fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-ambulance fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-ambulance fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-ambulance fa-2"></i>&nbsp;
 
+        <i class="fa fa-ambulance fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of ambulance at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-ambulance fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of ambulance at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-ambulance fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of ambulance at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-ambulance fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of ambulance at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-ambulance fa-1"></i>
 
+      <i class="fa fa-ambulance fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of ambulance</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-ambulance
 
       fa-ambulance
 
       <small>
 
       <small>
 
-        <i class="fa fa-ambulance"></i> &middot;
 
+        <i class="fa fa-ambulance" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0f9</span> &middot;
 
         Unicode: <span class="upper">f0f9</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-ambulance"></i> fa-ambulance
 
+            <i class="fa fa-ambulance" aria-hidden="true"></i><span class="sr-only">Example of ambulance</span> fa-ambulance
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-ambulance&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-ambulance&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 302 - 0
icon/american-sign-language-interpreting/index.html
View File 

@@ -0,0 +1,302 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <!-- Basic Page Needs
 
+ ================================================== -->
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 
+  <meta name="description" content="Font Awesome, the iconic font and CSS framework">
 
+  <meta name="author" content="Dave Gandy">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
 
+
 
+  <title>fa-american-sign-language-interpreting: Font Awesome Icons</title>
 
+
 
+  <!-- CSS
 
+  ================================================== -->
 
+  <link rel="stylesheet" href="../../assets/css/site.css">
 
+  <link rel="stylesheet" href="../../assets/css/pygments.css">
 
+  <link rel="stylesheet" href="../../assets/font-awesome/css/font-awesome.css">
 
+
 
+  <!--[if lt IE 9]>
 
+    <script src="../../assets/js/html5shiv.js"></script>
 
+    <script src="../../assets/js/respond.min.js"></script>
 
+  <![endif]-->
 
+
 
+  <script src="https://use.fonticons.com/ffe176a3.js"></script>
 
+
 
+  <script>
 
+    var _gaq = _gaq || [];
 
+    _gaq.push(['_setAccount', 'UA-30136587-1']);
 
+    _gaq.push(['_trackPageview']);
 
+
 
+    (function() {
 
+      var ga = document.createElement('script');
 
+      ga.src = 'https://www.google-analytics.com/ga.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(ga, s);
 
+    })();
 
+  </script>
 
+</head>
 
+<body>
 
+  <script>
 
+    (function(){
 
+      var bsa = document.createElement('script');
 
+      bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(bsa, s);
 
+    })();
 
+  </script>
 
+  <div id="wrap"> <!-- necessary for sticky footer. wrap all content except footer -->
 
+    <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="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="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
+    </div>
 
+
 
+    <div class="navbar-collapse collapse">
 
+      <ul class="nav navbar-nav">
 
+        <li class="hidden-sm "><a href="../../">Home</a></li>
 
+        <li class="hidden-sm">
 
+          <a href="../../whats-new/">What's New</a>
 
+        </li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../whats-new/">New</a>
 
+        </li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
+        <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../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"><a href="../../examples/">Examples</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../../examples/">Examples</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../../examples/#basic">Basic Icons</a></li>
 
+            <li><a href="../../examples/#larger">Larger Icons</a></li>
 
+            <li><a href="../../examples/#fixed-width">Fixed Width Icons</a></li>
 
+            <li><a href="../../examples/#list">List Icons</a></li>
 
+            <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
+            <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
+            <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
+            <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
+            <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
+            <li><a href="../../examples/#custom">Custom CSS</a></li>
 
+          </ul>
 
+        </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
+        <li><a href="../../community/">Community</a></li>
 
+        <li><a href="../../license/">License</a></li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+
 
+    <div class="jumbotron jumbotron-icon">
 
+  <div class="container">
 
+    <div class="info-icons">
 
+      <i class="fa fa-american-sign-language-interpreting fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of american-sign-language-interpreting at 6x</span>&nbsp;&nbsp;
 
+      <span class="hide-xs">
 
+        <i class="fa fa-american-sign-language-interpreting fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of american-sign-language-interpreting at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-american-sign-language-interpreting fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of american-sign-language-interpreting at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-american-sign-language-interpreting fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of american-sign-language-interpreting at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-american-sign-language-interpreting fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of american-sign-language-interpreting at 2x</span>
 
+        &nbsp;
 
+      </span>
 
+      <i class="fa fa-american-sign-language-interpreting fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of american-sign-language-interpreting</span>
 
+    </div>
 
+    <h1 class="info-class">
 
+      fa-american-sign-language-interpreting
 
+      <small>
 
+        <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i> &middot;
 
+        Unicode: <span class="upper">f2a3</span> &middot;
 
+        Created: v4.6 &middot;
 
+        Categories:
 
+        
+          Web Application Icons,
 
+        
+          Accessibility Icons
 
+        
+        
+        
+          &middot; Aliases:
 
+          
+            fa-asl-interpreting
 
+          
+        
+        
+      </small>
 
+    </h1>
 
+  </div>
 
+</div>
 
+
 
+<div class="container">
 
+  <section>
 
+    <div class="row">
 
+      <div class="col-md-9 col-sm-9">
 
+        <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
+        <div class="well well-transparent">
 
+          <div style="font-size: 24px; line-height: 1.5em;">
 
+            <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i><span class="sr-only">Example of american-sign-language-interpreting</span> fa-american-sign-language-interpreting
 
+          </div>
 
+        </div>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-american-sign-language-interpreting&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+</code></pre></div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
+      </div>
 
+      <div class="col-md-3 col-sm-3">
 
+        <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
+</div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+</div>
 
+
 
+
 
+  </div>
 
+  <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="../../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="../../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="../../assets/img/logo-themeisle.png" width="220" height="65" alt="">
 
+      </a>
 
+    </div>
 
+    <div>
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
+    </div>
 
+    <div>
 
+      Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>
 
+      <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
 
+      Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
 
+    </div>
 
+    <div>
 
+      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="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> &middot;
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a> &middot;
 
+      <a href="../../3.2.1">Old 3.2.1 Docs</a>
 
+    </div>
 
+  </div>
 
+</footer>
 
+
 
+
 
+  <script src="https://platform.twitter.com/widgets.js"></script>
 
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
+  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
 
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
 
+  <script src="../../assets/js/site.js"></script>
 
+  <script src="../../assets/js/search.js"></script>
 
+  </body>
 
+</html>

+ 63 - 37
icon/anchor/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-anchor fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-anchor fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of anchor at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-anchor fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-anchor fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-anchor fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-anchor fa-2"></i>&nbsp;
 
+        <i class="fa fa-anchor fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of anchor at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-anchor fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of anchor at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-anchor fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of anchor at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-anchor fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of anchor at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-anchor fa-1"></i>
 
+      <i class="fa fa-anchor fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of anchor</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-anchor
 
       fa-anchor
 
       <small>
 
       <small>
 
-        <i class="fa fa-anchor"></i> &middot;
 
+        <i class="fa fa-anchor" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f13d</span> &middot;
 
         Unicode: <span class="upper">f13d</span> &middot;
 
         Created: v3.1 &middot;
 
         Created: v3.1 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-anchor"></i> fa-anchor
 
+            <i class="fa fa-anchor" aria-hidden="true"></i><span class="sr-only">Example of anchor</span> fa-anchor
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-anchor&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-anchor&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/android/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-android fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-android fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of android at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-android fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-android fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-android fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-android fa-2"></i>&nbsp;
 
+        <i class="fa fa-android fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of android at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-android fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of android at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-android fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of android at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-android fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of android at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-android fa-1"></i>
 
+      <i class="fa fa-android fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of android</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-android
 
       fa-android
 
       <small>
 
       <small>
 
-        <i class="fa fa-android"></i> &middot;
 
+        <i class="fa fa-android" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f17b</span> &middot;
 
         Unicode: <span class="upper">f17b</span> &middot;
 
         Created: v3.2 &middot;
 
         Created: v3.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-android"></i> fa-android
 
+            <i class="fa fa-android" aria-hidden="true"></i><span class="sr-only">Example of android</span> fa-android
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-android&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-android&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angellist/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angellist fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angellist fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angellist at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angellist fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angellist fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angellist fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angellist fa-2"></i>&nbsp;
 
+        <i class="fa fa-angellist fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angellist at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angellist fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angellist at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angellist fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angellist at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angellist fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angellist at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angellist fa-1"></i>
 
+      <i class="fa fa-angellist fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angellist</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angellist
 
       fa-angellist
 
       <small>
 
       <small>
 
-        <i class="fa fa-angellist"></i> &middot;
 
+        <i class="fa fa-angellist" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f209</span> &middot;
 
         Unicode: <span class="upper">f209</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angellist"></i> fa-angellist
 
+            <i class="fa fa-angellist" aria-hidden="true"></i><span class="sr-only">Example of angellist</span> fa-angellist
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angellist&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angellist&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-double-down/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-double-down fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-double-down fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-double-down at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-double-down fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-double-down fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-double-down fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-double-down fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-double-down fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-down at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-double-down fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-double-down at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-double-down fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-down at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-double-down fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-down at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-double-down fa-1"></i>
 
+      <i class="fa fa-angle-double-down fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-double-down</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-double-down
 
       fa-angle-double-down
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-double-down"></i> &middot;
 
+        <i class="fa fa-angle-double-down" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f103</span> &middot;
 
         Unicode: <span class="upper">f103</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-double-down"></i> fa-angle-double-down
 
+            <i class="fa fa-angle-double-down" aria-hidden="true"></i><span class="sr-only">Example of angle-double-down</span> fa-angle-double-down
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-down&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-down&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-double-left/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-double-left fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-double-left fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-double-left at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-double-left fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-double-left fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-double-left fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-double-left fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-double-left fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-left at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-double-left fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-double-left at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-double-left fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-left at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-double-left fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-left at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-double-left fa-1"></i>
 
+      <i class="fa fa-angle-double-left fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-double-left</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-double-left
 
       fa-angle-double-left
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-double-left"></i> &middot;
 
+        <i class="fa fa-angle-double-left" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f100</span> &middot;
 
         Unicode: <span class="upper">f100</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-double-left"></i> fa-angle-double-left
 
+            <i class="fa fa-angle-double-left" aria-hidden="true"></i><span class="sr-only">Example of angle-double-left</span> fa-angle-double-left
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-double-right/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-double-right fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-double-right fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-double-right at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-double-right fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-double-right fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-double-right fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-double-right fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-double-right fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-right at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-double-right fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-double-right at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-double-right fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-right at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-double-right fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-right at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-double-right fa-1"></i>
 
+      <i class="fa fa-angle-double-right fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-double-right</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-double-right
 
       fa-angle-double-right
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-double-right"></i> &middot;
 
+        <i class="fa fa-angle-double-right" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f101</span> &middot;
 
         Unicode: <span class="upper">f101</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-double-right"></i> fa-angle-double-right
 
+            <i class="fa fa-angle-double-right" aria-hidden="true"></i><span class="sr-only">Example of angle-double-right</span> fa-angle-double-right
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-right&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-double-up/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-double-up fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-double-up fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-double-up at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-double-up fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-double-up fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-double-up fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-double-up fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-double-up fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-up at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-double-up fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-double-up at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-double-up fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-up at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-double-up fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-double-up at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-double-up fa-1"></i>
 
+      <i class="fa fa-angle-double-up fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-double-up</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-double-up
 
       fa-angle-double-up
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-double-up"></i> &middot;
 
+        <i class="fa fa-angle-double-up" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f102</span> &middot;
 
         Unicode: <span class="upper">f102</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-double-up"></i> fa-angle-double-up
 
+            <i class="fa fa-angle-double-up" aria-hidden="true"></i><span class="sr-only">Example of angle-double-up</span> fa-angle-double-up
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-up&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-double-up&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-down/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-down fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-down fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-down at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-down fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-down fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-down fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-down fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-down fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-down at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-down fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-down at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-down fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-down at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-down fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-down at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-down fa-1"></i>
 
+      <i class="fa fa-angle-down fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-down</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-down
 
       fa-angle-down
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-down"></i> &middot;
 
+        <i class="fa fa-angle-down" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f107</span> &middot;
 
         Unicode: <span class="upper">f107</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-down"></i> fa-angle-down
 
+            <i class="fa fa-angle-down" aria-hidden="true"></i><span class="sr-only">Example of angle-down</span> fa-angle-down
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-down&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-down&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-left/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-left fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-left fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-left at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-left fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-left fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-left fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-left fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-left fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-left at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-left fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-left at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-left fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-left at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-left fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-left at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-left fa-1"></i>
 
+      <i class="fa fa-angle-left fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-left</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-left
 
       fa-angle-left
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-left"></i> &middot;
 
+        <i class="fa fa-angle-left" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f104</span> &middot;
 
         Unicode: <span class="upper">f104</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-left"></i> fa-angle-left
 
+            <i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Example of angle-left</span> fa-angle-left
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-right/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-right fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-right fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-right at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-right fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-right fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-right fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-right fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-right fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-right at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-right fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-right at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-right fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-right at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-right fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-right at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-right fa-1"></i>
 
+      <i class="fa fa-angle-right fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-right</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-right
 
       fa-angle-right
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-right"></i> &middot;
 
+        <i class="fa fa-angle-right" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f105</span> &middot;
 
         Unicode: <span class="upper">f105</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-right"></i> fa-angle-right
 
+            <i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Example of angle-right</span> fa-angle-right
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-right&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/angle-up/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-angle-up fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-angle-up fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of angle-up at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-angle-up fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-angle-up fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-angle-up fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-angle-up fa-2"></i>&nbsp;
 
+        <i class="fa fa-angle-up fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-up at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-angle-up fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of angle-up at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-angle-up fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-up at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-angle-up fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of angle-up at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-angle-up fa-1"></i>
 
+      <i class="fa fa-angle-up fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of angle-up</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-angle-up
 
       fa-angle-up
 
       <small>
 
       <small>
 
-        <i class="fa fa-angle-up"></i> &middot;
 
+        <i class="fa fa-angle-up" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f106</span> &middot;
 
         Unicode: <span class="upper">f106</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-angle-up"></i> fa-angle-up
 
+            <i class="fa fa-angle-up" aria-hidden="true"></i><span class="sr-only">Example of angle-up</span> fa-angle-up
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-up&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-angle-up&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/apple/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-apple fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-apple fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of apple at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-apple fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-apple fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-apple fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-apple fa-2"></i>&nbsp;
 
+        <i class="fa fa-apple fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of apple at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-apple fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of apple at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-apple fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of apple at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-apple fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of apple at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-apple fa-1"></i>
 
+      <i class="fa fa-apple fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of apple</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-apple
 
       fa-apple
 
       <small>
 
       <small>
 
-        <i class="fa fa-apple"></i> &middot;
 
+        <i class="fa fa-apple" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f179</span> &middot;
 
         Unicode: <span class="upper">f179</span> &middot;
 
         Created: v3.2 &middot;
 
         Created: v3.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-apple"></i> fa-apple
 
+            <i class="fa fa-apple" aria-hidden="true"></i><span class="sr-only">Example of apple</span> fa-apple
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-apple&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-apple&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/archive/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-archive fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-archive fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of archive at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-archive fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-archive fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-archive fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-archive fa-2"></i>&nbsp;
 
+        <i class="fa fa-archive fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of archive at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-archive fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of archive at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-archive fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of archive at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-archive fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of archive at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-archive fa-1"></i>
 
+      <i class="fa fa-archive fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of archive</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-archive
 
       fa-archive
 
       <small>
 
       <small>
 
-        <i class="fa fa-archive"></i> &middot;
 
+        <i class="fa fa-archive" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f187</span> &middot;
 
         Unicode: <span class="upper">f187</span> &middot;
 
         Created: v3.2 &middot;
 
         Created: v3.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-archive"></i> fa-archive
 
+            <i class="fa fa-archive" aria-hidden="true"></i><span class="sr-only">Example of archive</span> fa-archive
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-archive&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-archive&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/area-chart/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-area-chart fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-area-chart fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of area-chart at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-area-chart fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-area-chart fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-area-chart fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-area-chart fa-2"></i>&nbsp;
 
+        <i class="fa fa-area-chart fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of area-chart at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-area-chart fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of area-chart at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-area-chart fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of area-chart at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-area-chart fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of area-chart at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-area-chart fa-1"></i>
 
+      <i class="fa fa-area-chart fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of area-chart</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-area-chart
 
       fa-area-chart
 
       <small>
 
       <small>
 
-        <i class="fa fa-area-chart"></i> &middot;
 
+        <i class="fa fa-area-chart" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1fe</span> &middot;
 
         Unicode: <span class="upper">f1fe</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-area-chart"></i> fa-area-chart
 
+            <i class="fa fa-area-chart" aria-hidden="true"></i><span class="sr-only">Example of area-chart</span> fa-area-chart
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-area-chart&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-area-chart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-down/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-down fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-down fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-down at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-down fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-down fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-down fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-down fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-down fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-down at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-down fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-down at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-down fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-down at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-down fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-down at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-down fa-1"></i>
 
+      <i class="fa fa-arrow-circle-down fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-down</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-down
 
       fa-arrow-circle-down
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-down"></i> &middot;
 
+        <i class="fa fa-arrow-circle-down" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0ab</span> &middot;
 
         Unicode: <span class="upper">f0ab</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-down"></i> fa-arrow-circle-down
 
+            <i class="fa fa-arrow-circle-down" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-down</span> fa-arrow-circle-down
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-down&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-down&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-left/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-left fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-left fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-left at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-left fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-left fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-left fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-left fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-left fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-left at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-left fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-left at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-left fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-left at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-left fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-left at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-left fa-1"></i>
 
+      <i class="fa fa-arrow-circle-left fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-left</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-left
 
       fa-arrow-circle-left
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-left"></i> &middot;
 
+        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0a8</span> &middot;
 
         Unicode: <span class="upper">f0a8</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-left"></i> fa-arrow-circle-left
 
+            <i class="fa fa-arrow-circle-left" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-left</span> fa-arrow-circle-left
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-o-down/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-o-down fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-o-down fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-o-down at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-o-down fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-o-down fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-o-down fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-o-down fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-o-down fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-down at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-o-down fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-o-down at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-o-down fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-down at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-o-down fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-down at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-o-down fa-1"></i>
 
+      <i class="fa fa-arrow-circle-o-down fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-o-down</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-o-down
 
       fa-arrow-circle-o-down
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-o-down"></i> &middot;
 
+        <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f01a</span> &middot;
 
         Unicode: <span class="upper">f01a</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-o-down"></i> fa-arrow-circle-o-down
 
+            <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-o-down</span> fa-arrow-circle-o-down
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-down&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-down&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-o-left/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-o-left fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-o-left fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-o-left at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-o-left fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-o-left fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-o-left fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-o-left fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-o-left fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-left at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-o-left fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-o-left at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-o-left fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-left at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-o-left fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-left at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-o-left fa-1"></i>
 
+      <i class="fa fa-arrow-circle-o-left fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-o-left</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-o-left
 
       fa-arrow-circle-o-left
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-o-left"></i> &middot;
 
+        <i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f190</span> &middot;
 
         Unicode: <span class="upper">f190</span> &middot;
 
         Created: v4.0 &middot;
 
         Created: v4.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left
 
+            <i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-o-left</span> fa-arrow-circle-o-left
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-o-right/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-o-right fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-o-right fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-o-right at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-o-right fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-o-right fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-o-right fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-o-right fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-o-right fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-right at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-o-right fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-o-right at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-o-right fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-right at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-o-right fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-right at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-o-right fa-1"></i>
 
+      <i class="fa fa-arrow-circle-o-right fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-o-right</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-o-right
 
       fa-arrow-circle-o-right
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-o-right"></i> &middot;
 
+        <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f18e</span> &middot;
 
         Unicode: <span class="upper">f18e</span> &middot;
 
         Created: v4.0 &middot;
 
         Created: v4.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right
 
+            <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-o-right</span> fa-arrow-circle-o-right
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-right&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-o-up/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-o-up fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-o-up fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-o-up at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-o-up fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-o-up fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-o-up fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-o-up fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-o-up fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-up at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-o-up fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-o-up at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-o-up fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-up at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-o-up fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-o-up at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-o-up fa-1"></i>
 
+      <i class="fa fa-arrow-circle-o-up fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-o-up</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-o-up
 
       fa-arrow-circle-o-up
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-o-up"></i> &middot;
 
+        <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f01b</span> &middot;
 
         Unicode: <span class="upper">f01b</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-o-up"></i> fa-arrow-circle-o-up
 
+            <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-o-up</span> fa-arrow-circle-o-up
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-up&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-o-up&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-right/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-right fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-right fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-right at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-right fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-right fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-right fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-right fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-right fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-right at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-right fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-right at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-right fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-right at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-right fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-right at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-right fa-1"></i>
 
+      <i class="fa fa-arrow-circle-right fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-right</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-right
 
       fa-arrow-circle-right
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-right"></i> &middot;
 
+        <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0a9</span> &middot;
 
         Unicode: <span class="upper">f0a9</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-right"></i> fa-arrow-circle-right
 
+            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-right</span> fa-arrow-circle-right
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-right&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-circle-up/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-circle-up fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-circle-up fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-circle-up at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-circle-up fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-circle-up fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-circle-up fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-circle-up fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-circle-up fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-up at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-circle-up fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-circle-up at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-circle-up fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-up at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-circle-up fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-circle-up at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-circle-up fa-1"></i>
 
+      <i class="fa fa-arrow-circle-up fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-circle-up</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-circle-up
 
       fa-arrow-circle-up
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-circle-up"></i> &middot;
 
+        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0aa</span> &middot;
 
         Unicode: <span class="upper">f0aa</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-circle-up"></i> fa-arrow-circle-up
 
+            <i class="fa fa-arrow-circle-up" aria-hidden="true"></i><span class="sr-only">Example of arrow-circle-up</span> fa-arrow-circle-up
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-up&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-circle-up&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-down/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-down fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-down fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-down at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-down fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-down fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-down fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-down fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-down fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-down at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-down fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-down at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-down fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-down at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-down fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-down at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-down fa-1"></i>
 
+      <i class="fa fa-arrow-down fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-down</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-down
 
       fa-arrow-down
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-down"></i> &middot;
 
+        <i class="fa fa-arrow-down" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f063</span> &middot;
 
         Unicode: <span class="upper">f063</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-down"></i> fa-arrow-down
 
+            <i class="fa fa-arrow-down" aria-hidden="true"></i><span class="sr-only">Example of arrow-down</span> fa-arrow-down
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-down&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-down&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-left/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-left fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-left fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-left at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-left fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-left fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-left fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-left fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-left fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-left at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-left fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-left at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-left fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-left at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-left fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-left at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-left fa-1"></i>
 
+      <i class="fa fa-arrow-left fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-left</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-left
 
       fa-arrow-left
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-left"></i> &middot;
 
+        <i class="fa fa-arrow-left" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f060</span> &middot;
 
         Unicode: <span class="upper">f060</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-left"></i> fa-arrow-left
 
+            <i class="fa fa-arrow-left" aria-hidden="true"></i><span class="sr-only">Example of arrow-left</span> fa-arrow-left
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-left&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-left&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-right/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-right fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-right fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-right at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-right fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-right fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-right fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-right fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-right fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-right at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-right fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-right at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-right fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-right at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-right fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-right at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-right fa-1"></i>
 
+      <i class="fa fa-arrow-right fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-right</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-right
 
       fa-arrow-right
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-right"></i> &middot;
 
+        <i class="fa fa-arrow-right" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f061</span> &middot;
 
         Unicode: <span class="upper">f061</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-right"></i> fa-arrow-right
 
+            <i class="fa fa-arrow-right" aria-hidden="true"></i><span class="sr-only">Example of arrow-right</span> fa-arrow-right
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-right&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-right&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrow-up/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrow-up fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrow-up fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrow-up at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrow-up fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrow-up fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrow-up fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrow-up fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrow-up fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-up at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrow-up fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrow-up at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrow-up fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-up at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrow-up fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrow-up at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrow-up fa-1"></i>
 
+      <i class="fa fa-arrow-up fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrow-up</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrow-up
 
       fa-arrow-up
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrow-up"></i> &middot;
 
+        <i class="fa fa-arrow-up" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f062</span> &middot;
 
         Unicode: <span class="upper">f062</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrow-up"></i> fa-arrow-up
 
+            <i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sr-only">Example of arrow-up</span> fa-arrow-up
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-up&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrow-up&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrows-alt/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrows-alt fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrows-alt fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrows-alt at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrows-alt fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrows-alt fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrows-alt fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrows-alt fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrows-alt fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-alt at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrows-alt fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrows-alt at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrows-alt fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-alt at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrows-alt fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-alt at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrows-alt fa-1"></i>
 
+      <i class="fa fa-arrows-alt fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrows-alt</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrows-alt
 
       fa-arrows-alt
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrows-alt"></i> &middot;
 
+        <i class="fa fa-arrows-alt" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0b2</span> &middot;
 
         Unicode: <span class="upper">f0b2</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrows-alt"></i> fa-arrows-alt
 
+            <i class="fa fa-arrows-alt" aria-hidden="true"></i><span class="sr-only">Example of arrows-alt</span> fa-arrows-alt
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows-alt&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows-alt&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrows-h/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrows-h fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrows-h fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrows-h at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrows-h fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrows-h fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrows-h fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrows-h fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrows-h fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-h at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrows-h fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrows-h at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrows-h fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-h at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrows-h fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-h at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrows-h fa-1"></i>
 
+      <i class="fa fa-arrows-h fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrows-h</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrows-h
 
       fa-arrows-h
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrows-h"></i> &middot;
 
+        <i class="fa fa-arrows-h" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f07e</span> &middot;
 
         Unicode: <span class="upper">f07e</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrows-h"></i> fa-arrows-h
 
+            <i class="fa fa-arrows-h" aria-hidden="true"></i><span class="sr-only">Example of arrows-h</span> fa-arrows-h
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows-h&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows-h&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrows-v/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrows-v fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrows-v fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrows-v at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrows-v fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrows-v fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrows-v fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrows-v fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrows-v fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-v at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrows-v fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrows-v at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrows-v fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-v at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrows-v fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows-v at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrows-v fa-1"></i>
 
+      <i class="fa fa-arrows-v fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrows-v</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrows-v
 
       fa-arrows-v
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrows-v"></i> &middot;
 
+        <i class="fa fa-arrows-v" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f07d</span> &middot;
 
         Unicode: <span class="upper">f07d</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrows-v"></i> fa-arrows-v
 
+            <i class="fa fa-arrows-v" aria-hidden="true"></i><span class="sr-only">Example of arrows-v</span> fa-arrows-v
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows-v&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows-v&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/arrows/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-arrows fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-arrows fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of arrows at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-arrows fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-arrows fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-arrows fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-arrows fa-2"></i>&nbsp;
 
+        <i class="fa fa-arrows fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-arrows fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of arrows at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-arrows fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-arrows fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of arrows at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-arrows fa-1"></i>
 
+      <i class="fa fa-arrows fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of arrows</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-arrows
 
       fa-arrows
 
       <small>
 
       <small>
 
-        <i class="fa fa-arrows"></i> &middot;
 
+        <i class="fa fa-arrows" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f047</span> &middot;
 
         Unicode: <span class="upper">f047</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-arrows"></i> fa-arrows
 
+            <i class="fa fa-arrows" aria-hidden="true"></i><span class="sr-only">Example of arrows</span> fa-arrows
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-arrows&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 297 - 0
icon/assistive-listening-systems/index.html
View File 

@@ -0,0 +1,297 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <!-- Basic Page Needs
 
+ ================================================== -->
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 
+  <meta name="description" content="Font Awesome, the iconic font and CSS framework">
 
+  <meta name="author" content="Dave Gandy">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
 
+
 
+  <title>fa-assistive-listening-systems: Font Awesome Icons</title>
 
+
 
+  <!-- CSS
 
+  ================================================== -->
 
+  <link rel="stylesheet" href="../../assets/css/site.css">
 
+  <link rel="stylesheet" href="../../assets/css/pygments.css">
 
+  <link rel="stylesheet" href="../../assets/font-awesome/css/font-awesome.css">
 
+
 
+  <!--[if lt IE 9]>
 
+    <script src="../../assets/js/html5shiv.js"></script>
 
+    <script src="../../assets/js/respond.min.js"></script>
 
+  <![endif]-->
 
+
 
+  <script src="https://use.fonticons.com/ffe176a3.js"></script>
 
+
 
+  <script>
 
+    var _gaq = _gaq || [];
 
+    _gaq.push(['_setAccount', 'UA-30136587-1']);
 
+    _gaq.push(['_trackPageview']);
 
+
 
+    (function() {
 
+      var ga = document.createElement('script');
 
+      ga.src = 'https://www.google-analytics.com/ga.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(ga, s);
 
+    })();
 
+  </script>
 
+</head>
 
+<body>
 
+  <script>
 
+    (function(){
 
+      var bsa = document.createElement('script');
 
+      bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(bsa, s);
 
+    })();
 
+  </script>
 
+  <div id="wrap"> <!-- necessary for sticky footer. wrap all content except footer -->
 
+    <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="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="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
+    </div>
 
+
 
+    <div class="navbar-collapse collapse">
 
+      <ul class="nav navbar-nav">
 
+        <li class="hidden-sm "><a href="../../">Home</a></li>
 
+        <li class="hidden-sm">
 
+          <a href="../../whats-new/">What's New</a>
 
+        </li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../whats-new/">New</a>
 
+        </li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
+        <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../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"><a href="../../examples/">Examples</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../../examples/">Examples</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../../examples/#basic">Basic Icons</a></li>
 
+            <li><a href="../../examples/#larger">Larger Icons</a></li>
 
+            <li><a href="../../examples/#fixed-width">Fixed Width Icons</a></li>
 
+            <li><a href="../../examples/#list">List Icons</a></li>
 
+            <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
+            <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
+            <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
+            <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
+            <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
+            <li><a href="../../examples/#custom">Custom CSS</a></li>
 
+          </ul>
 
+        </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
+        <li><a href="../../community/">Community</a></li>
 
+        <li><a href="../../license/">License</a></li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+
 
+    <div class="jumbotron jumbotron-icon">
 
+  <div class="container">
 
+    <div class="info-icons">
 
+      <i class="fa fa-assistive-listening-systems fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of assistive-listening-systems at 6x</span>&nbsp;&nbsp;
 
+      <span class="hide-xs">
 
+        <i class="fa fa-assistive-listening-systems fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of assistive-listening-systems at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-assistive-listening-systems fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of assistive-listening-systems at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-assistive-listening-systems fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of assistive-listening-systems at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-assistive-listening-systems fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of assistive-listening-systems at 2x</span>
 
+        &nbsp;
 
+      </span>
 
+      <i class="fa fa-assistive-listening-systems fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of assistive-listening-systems</span>
 
+    </div>
 
+    <h1 class="info-class">
 
+      fa-assistive-listening-systems
 
+      <small>
 
+        <i class="fa fa-assistive-listening-systems" aria-hidden="true"></i> &middot;
 
+        Unicode: <span class="upper">f2a2</span> &middot;
 
+        Created: v4.6 &middot;
 
+        Categories:
 
+        
+          Web Application Icons,
 
+        
+          Accessibility Icons
 
+        
+        
+        
+        
+      </small>
 
+    </h1>
 
+  </div>
 
+</div>
 
+
 
+<div class="container">
 
+  <section>
 
+    <div class="row">
 
+      <div class="col-md-9 col-sm-9">
 
+        <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
+        <div class="well well-transparent">
 
+          <div style="font-size: 24px; line-height: 1.5em;">
 
+            <i class="fa fa-assistive-listening-systems" aria-hidden="true"></i><span class="sr-only">Example of assistive-listening-systems</span> fa-assistive-listening-systems
 
+          </div>
 
+        </div>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-assistive-listening-systems&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+</code></pre></div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
+      </div>
 
+      <div class="col-md-3 col-sm-3">
 
+        <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
+</div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+</div>
 
+
 
+
 
+  </div>
 
+  <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="../../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="../../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="../../assets/img/logo-themeisle.png" width="220" height="65" alt="">
 
+      </a>
 
+    </div>
 
+    <div>
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
+    </div>
 
+    <div>
 
+      Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>
 
+      <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
 
+      Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
 
+    </div>
 
+    <div>
 
+      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="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> &middot;
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a> &middot;
 
+      <a href="../../3.2.1">Old 3.2.1 Docs</a>
 
+    </div>
 
+  </div>
 
+</footer>
 
+
 
+
 
+  <script src="https://platform.twitter.com/widgets.js"></script>
 
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
+  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
 
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
 
+  <script src="../../assets/js/site.js"></script>
 
+  <script src="../../assets/js/search.js"></script>
 
+  </body>
 
+</html>

+ 63 - 37
icon/asterisk/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-asterisk fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-asterisk fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of asterisk at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-asterisk fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-asterisk fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-asterisk fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-asterisk fa-2"></i>&nbsp;
 
+        <i class="fa fa-asterisk fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of asterisk at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-asterisk fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of asterisk at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-asterisk fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of asterisk at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-asterisk fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of asterisk at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-asterisk fa-1"></i>
 
+      <i class="fa fa-asterisk fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of asterisk</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-asterisk
 
       fa-asterisk
 
       <small>
 
       <small>
 
-        <i class="fa fa-asterisk"></i> &middot;
 
+        <i class="fa fa-asterisk" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f069</span> &middot;
 
         Unicode: <span class="upper">f069</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-asterisk"></i> fa-asterisk
 
+            <i class="fa fa-asterisk" aria-hidden="true"></i><span class="sr-only">Example of asterisk</span> fa-asterisk
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-asterisk&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-asterisk&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/at/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-at fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-at fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of at at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-at fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-at fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-at fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-at fa-2"></i>&nbsp;
 
+        <i class="fa fa-at fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of at at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-at fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of at at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-at fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of at at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-at fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of at at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-at fa-1"></i>
 
+      <i class="fa fa-at fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of at</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-at
 
       fa-at
 
       <small>
 
       <small>
 
-        <i class="fa fa-at"></i> &middot;
 
+        <i class="fa fa-at" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1fa</span> &middot;
 
         Unicode: <span class="upper">f1fa</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-at"></i> fa-at
 
+            <i class="fa fa-at" aria-hidden="true"></i><span class="sr-only">Example of at</span> fa-at
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-at&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-at&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 297 - 0
icon/audio-description/index.html
View File 

@@ -0,0 +1,297 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <!-- Basic Page Needs
 
+ ================================================== -->
 
+  <meta charset="utf-8" />
 
+  <meta name="viewport" content="width=device-width,initial-scale=1">
 
+  <meta name="description" content="Font Awesome, the iconic font and CSS framework">
 
+  <meta name="author" content="Dave Gandy">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
 
+
 
+  <title>fa-audio-description: Font Awesome Icons</title>
 
+
 
+  <!-- CSS
 
+  ================================================== -->
 
+  <link rel="stylesheet" href="../../assets/css/site.css">
 
+  <link rel="stylesheet" href="../../assets/css/pygments.css">
 
+  <link rel="stylesheet" href="../../assets/font-awesome/css/font-awesome.css">
 
+
 
+  <!--[if lt IE 9]>
 
+    <script src="../../assets/js/html5shiv.js"></script>
 
+    <script src="../../assets/js/respond.min.js"></script>
 
+  <![endif]-->
 
+
 
+  <script src="https://use.fonticons.com/ffe176a3.js"></script>
 
+
 
+  <script>
 
+    var _gaq = _gaq || [];
 
+    _gaq.push(['_setAccount', 'UA-30136587-1']);
 
+    _gaq.push(['_trackPageview']);
 
+
 
+    (function() {
 
+      var ga = document.createElement('script');
 
+      ga.src = 'https://www.google-analytics.com/ga.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(ga, s);
 
+    })();
 
+  </script>
 
+</head>
 
+<body>
 
+  <script>
 
+    (function(){
 
+      var bsa = document.createElement('script');
 
+      bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
 
+      var s = document.scripts[0];
 
+      s.parentNode.insertBefore(bsa, s);
 
+    })();
 
+  </script>
 
+  <div id="wrap"> <!-- necessary for sticky footer. wrap all content except footer -->
 
+    <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="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="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
+    </div>
 
+
 
+    <div class="navbar-collapse collapse">
 
+      <ul class="nav navbar-nav">
 
+        <li class="hidden-sm "><a href="../../">Home</a></li>
 
+        <li class="hidden-sm">
 
+          <a href="../../whats-new/">What's New</a>
 
+        </li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../whats-new/">New</a>
 
+        </li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
+        <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../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"><a href="../../examples/">Examples</a></li>
 
+        <li class="dropdown dropdown-split-right hidden-xs">
 
+          <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="../../examples/">Examples</a></li>
 
+            <li class="divider"></li>
 
+            <li><a href="../../examples/#basic">Basic Icons</a></li>
 
+            <li><a href="../../examples/#larger">Larger Icons</a></li>
 
+            <li><a href="../../examples/#fixed-width">Fixed Width Icons</a></li>
 
+            <li><a href="../../examples/#list">List Icons</a></li>
 
+            <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
+            <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
+            <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
+            <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
+            <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
+            <li><a href="../../examples/#custom">Custom CSS</a></li>
 
+          </ul>
 
+        </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
+        <li><a href="../../community/">Community</a></li>
 
+        <li><a href="../../license/">License</a></li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+
 
+    <div class="jumbotron jumbotron-icon">
 
+  <div class="container">
 
+    <div class="info-icons">
 
+      <i class="fa fa-audio-description fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of audio-description at 6x</span>&nbsp;&nbsp;
 
+      <span class="hide-xs">
 
+        <i class="fa fa-audio-description fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of audio-description at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-audio-description fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of audio-description at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-audio-description fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of audio-description at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-audio-description fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of audio-description at 2x</span>
 
+        &nbsp;
 
+      </span>
 
+      <i class="fa fa-audio-description fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of audio-description</span>
 
+    </div>
 
+    <h1 class="info-class">
 
+      fa-audio-description
 
+      <small>
 
+        <i class="fa fa-audio-description" aria-hidden="true"></i> &middot;
 
+        Unicode: <span class="upper">f29e</span> &middot;
 
+        Created: v4.6 &middot;
 
+        Categories:
 
+        
+          Web Application Icons,
 
+        
+          Accessibility Icons
 
+        
+        
+        
+        
+      </small>
 
+    </h1>
 
+  </div>
 
+</div>
 
+
 
+<div class="container">
 
+  <section>
 
+    <div class="row">
 
+      <div class="col-md-9 col-sm-9">
 
+        <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
+        <div class="well well-transparent">
 
+          <div style="font-size: 24px; line-height: 1.5em;">
 
+            <i class="fa fa-audio-description" aria-hidden="true"></i><span class="sr-only">Example of audio-description</span> fa-audio-description
 
+          </div>
 
+        </div>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-audio-description&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+</code></pre></div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
+      </div>
 
+      <div class="col-md-3 col-sm-3">
 
+        <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
+</div>
 
+      </div>
 
+    </div>
 
+  </section>
 
+</div>
 
+
 
+
 
+  </div>
 
+  <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="../../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="../../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="../../assets/img/logo-themeisle.png" width="220" height="65" alt="">
 
+      </a>
 
+    </div>
 
+    <div>
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
+    </div>
 
+    <div>
 
+      Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>
 
+      <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
+      Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>
 
+      <span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
 
+      Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
 
+    </div>
 
+    <div>
 
+      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="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> &middot;
 
+      <a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a> &middot;
 
+      <a href="../../3.2.1">Old 3.2.1 Docs</a>
 
+    </div>
 
+  </div>
 
+</footer>
 
+
 
+
 
+  <script src="https://platform.twitter.com/widgets.js"></script>
 
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
+  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
 
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
 
+  <script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
 
+  <script src="../../assets/js/site.js"></script>
 
+  <script src="../../assets/js/search.js"></script>
 
+  </body>
 
+</html>

+ 63 - 37
icon/backward/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-backward fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-backward fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of backward at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-backward fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-backward fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-backward fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-backward fa-2"></i>&nbsp;
 
+        <i class="fa fa-backward fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of backward at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-backward fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of backward at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-backward fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of backward at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-backward fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of backward at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-backward fa-1"></i>
 
+      <i class="fa fa-backward fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of backward</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-backward
 
       fa-backward
 
       <small>
 
       <small>
 
-        <i class="fa fa-backward"></i> &middot;
 
+        <i class="fa fa-backward" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f04a</span> &middot;
 
         Unicode: <span class="upper">f04a</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-backward"></i> fa-backward
 
+            <i class="fa fa-backward" aria-hidden="true"></i><span class="sr-only">Example of backward</span> fa-backward
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-backward&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-backward&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/balance-scale/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-balance-scale fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-balance-scale fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of balance-scale at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-balance-scale fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-balance-scale fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-balance-scale fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-balance-scale fa-2"></i>&nbsp;
 
+        <i class="fa fa-balance-scale fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of balance-scale at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-balance-scale fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of balance-scale at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-balance-scale fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of balance-scale at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-balance-scale fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of balance-scale at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-balance-scale fa-1"></i>
 
+      <i class="fa fa-balance-scale fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of balance-scale</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-balance-scale
 
       fa-balance-scale
 
       <small>
 
       <small>
 
-        <i class="fa fa-balance-scale"></i> &middot;
 
+        <i class="fa fa-balance-scale" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f24e</span> &middot;
 
         Unicode: <span class="upper">f24e</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-balance-scale"></i> fa-balance-scale
 
+            <i class="fa fa-balance-scale" aria-hidden="true"></i><span class="sr-only">Example of balance-scale</span> fa-balance-scale
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-balance-scale&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-balance-scale&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/ban/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-ban fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-ban fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of ban at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-ban fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-ban fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-ban fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-ban fa-2"></i>&nbsp;
 
+        <i class="fa fa-ban fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of ban at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-ban fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of ban at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-ban fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of ban at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-ban fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of ban at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-ban fa-1"></i>
 
+      <i class="fa fa-ban fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of ban</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-ban
 
       fa-ban
 
       <small>
 
       <small>
 
-        <i class="fa fa-ban"></i> &middot;
 
+        <i class="fa fa-ban" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f05e</span> &middot;
 
         Unicode: <span class="upper">f05e</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-ban"></i> fa-ban
 
+            <i class="fa fa-ban" aria-hidden="true"></i><span class="sr-only">Example of ban</span> fa-ban
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-ban&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-ban&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bar-chart/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bar-chart fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bar-chart fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bar-chart at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bar-chart fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bar-chart fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bar-chart fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bar-chart fa-2"></i>&nbsp;
 
+        <i class="fa fa-bar-chart fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bar-chart at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bar-chart fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bar-chart at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bar-chart fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bar-chart at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bar-chart fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bar-chart at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bar-chart fa-1"></i>
 
+      <i class="fa fa-bar-chart fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bar-chart</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bar-chart
 
       fa-bar-chart
 
       <small>
 
       <small>
 
-        <i class="fa fa-bar-chart"></i> &middot;
 
+        <i class="fa fa-bar-chart" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f080</span> &middot;
 
         Unicode: <span class="upper">f080</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -201,13 +222,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bar-chart"></i> fa-bar-chart
 
+            <i class="fa fa-bar-chart" aria-hidden="true"></i><span class="sr-only">Example of bar-chart</span> fa-bar-chart
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bar-chart&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bar-chart&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -239,7 +265,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/barcode/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-barcode fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-barcode fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of barcode at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-barcode fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-barcode fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-barcode fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-barcode fa-2"></i>&nbsp;
 
+        <i class="fa fa-barcode fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of barcode at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-barcode fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of barcode at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-barcode fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of barcode at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-barcode fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of barcode at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-barcode fa-1"></i>
 
+      <i class="fa fa-barcode fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of barcode</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-barcode
 
       fa-barcode
 
       <small>
 
       <small>
 
-        <i class="fa fa-barcode"></i> &middot;
 
+        <i class="fa fa-barcode" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f02a</span> &middot;
 
         Unicode: <span class="upper">f02a</span> &middot;
 
         Created: v1.0 &middot;
 
         Created: v1.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-barcode"></i> fa-barcode
 
+            <i class="fa fa-barcode" aria-hidden="true"></i><span class="sr-only">Example of barcode</span> fa-barcode
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-barcode&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-barcode&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bars/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bars fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bars fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bars at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bars fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bars fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bars fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bars fa-2"></i>&nbsp;
 
+        <i class="fa fa-bars fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bars at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bars fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bars at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bars fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bars at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bars fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bars at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bars fa-1"></i>
 
+      <i class="fa fa-bars fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bars</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bars
 
       fa-bars
 
       <small>
 
       <small>
 
-        <i class="fa fa-bars"></i> &middot;
 
+        <i class="fa fa-bars" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0c9</span> &middot;
 
         Unicode: <span class="upper">f0c9</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -201,13 +222,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bars"></i> fa-bars
 
+            <i class="fa fa-bars" aria-hidden="true"></i><span class="sr-only">Example of bars</span> fa-bars
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bars&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -239,7 +265,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/battery-empty/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-battery-empty fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-battery-empty fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of battery-empty at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-battery-empty fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-battery-empty fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-battery-empty fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-battery-empty fa-2"></i>&nbsp;
 
+        <i class="fa fa-battery-empty fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-empty at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-battery-empty fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of battery-empty at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-battery-empty fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-empty at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-battery-empty fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-empty at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-battery-empty fa-1"></i>
 
+      <i class="fa fa-battery-empty fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of battery-empty</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-battery-empty
 
       fa-battery-empty
 
       <small>
 
       <small>
 
-        <i class="fa fa-battery-empty"></i> &middot;
 
+        <i class="fa fa-battery-empty" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f244</span> &middot;
 
         Unicode: <span class="upper">f244</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -199,13 +220,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-battery-empty"></i> fa-battery-empty
 
+            <i class="fa fa-battery-empty" aria-hidden="true"></i><span class="sr-only">Example of battery-empty</span> fa-battery-empty
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-empty&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-empty&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -237,7 +263,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/battery-full/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-battery-full fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-battery-full fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of battery-full at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-battery-full fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-battery-full fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-battery-full fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-battery-full fa-2"></i>&nbsp;
 
+        <i class="fa fa-battery-full fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-full at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-battery-full fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of battery-full at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-battery-full fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-full at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-battery-full fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-full at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-battery-full fa-1"></i>
 
+      <i class="fa fa-battery-full fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of battery-full</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-battery-full
 
       fa-battery-full
 
       <small>
 
       <small>
 
-        <i class="fa fa-battery-full"></i> &middot;
 
+        <i class="fa fa-battery-full" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f240</span> &middot;
 
         Unicode: <span class="upper">f240</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -199,13 +220,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-battery-full"></i> fa-battery-full
 
+            <i class="fa fa-battery-full" aria-hidden="true"></i><span class="sr-only">Example of battery-full</span> fa-battery-full
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-full&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-full&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -237,7 +263,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/battery-half/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-battery-half fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-battery-half fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of battery-half at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-battery-half fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-battery-half fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-battery-half fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-battery-half fa-2"></i>&nbsp;
 
+        <i class="fa fa-battery-half fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-half at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-battery-half fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of battery-half at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-battery-half fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-half at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-battery-half fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-half at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-battery-half fa-1"></i>
 
+      <i class="fa fa-battery-half fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of battery-half</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-battery-half
 
       fa-battery-half
 
       <small>
 
       <small>
 
-        <i class="fa fa-battery-half"></i> &middot;
 
+        <i class="fa fa-battery-half" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f242</span> &middot;
 
         Unicode: <span class="upper">f242</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -199,13 +220,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-battery-half"></i> fa-battery-half
 
+            <i class="fa fa-battery-half" aria-hidden="true"></i><span class="sr-only">Example of battery-half</span> fa-battery-half
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-half&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-half&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -237,7 +263,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/battery-quarter/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-battery-quarter fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-battery-quarter fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of battery-quarter at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-battery-quarter fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-battery-quarter fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-battery-quarter fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-battery-quarter fa-2"></i>&nbsp;
 
+        <i class="fa fa-battery-quarter fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-quarter at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-battery-quarter fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of battery-quarter at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-battery-quarter fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-quarter at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-battery-quarter fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-quarter at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-battery-quarter fa-1"></i>
 
+      <i class="fa fa-battery-quarter fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of battery-quarter</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-battery-quarter
 
       fa-battery-quarter
 
       <small>
 
       <small>
 
-        <i class="fa fa-battery-quarter"></i> &middot;
 
+        <i class="fa fa-battery-quarter" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f243</span> &middot;
 
         Unicode: <span class="upper">f243</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -199,13 +220,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-battery-quarter"></i> fa-battery-quarter
 
+            <i class="fa fa-battery-quarter" aria-hidden="true"></i><span class="sr-only">Example of battery-quarter</span> fa-battery-quarter
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-quarter&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-quarter&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -237,7 +263,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/battery-three-quarters/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-battery-three-quarters fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-battery-three-quarters fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of battery-three-quarters at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-battery-three-quarters fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-battery-three-quarters fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-battery-three-quarters fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-battery-three-quarters fa-2"></i>&nbsp;
 
+        <i class="fa fa-battery-three-quarters fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-three-quarters at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-battery-three-quarters fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of battery-three-quarters at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-battery-three-quarters fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-three-quarters at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-battery-three-quarters fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of battery-three-quarters at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-battery-three-quarters fa-1"></i>
 
+      <i class="fa fa-battery-three-quarters fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of battery-three-quarters</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-battery-three-quarters
 
       fa-battery-three-quarters
 
       <small>
 
       <small>
 
-        <i class="fa fa-battery-three-quarters"></i> &middot;
 
+        <i class="fa fa-battery-three-quarters" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f241</span> &middot;
 
         Unicode: <span class="upper">f241</span> &middot;
 
         Created: v4.4 &middot;
 
         Created: v4.4 &middot;
 
         Categories:
 
         Categories:
 
@@ -199,13 +220,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-battery-three-quarters"></i> fa-battery-three-quarters
 
+            <i class="fa fa-battery-three-quarters" aria-hidden="true"></i><span class="sr-only">Example of battery-three-quarters</span> fa-battery-three-quarters
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-three-quarters&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-battery-three-quarters&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -237,7 +263,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bed/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bed fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bed fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bed at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bed fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bed fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bed fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bed fa-2"></i>&nbsp;
 
+        <i class="fa fa-bed fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bed at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bed fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bed at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bed fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bed at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bed fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bed at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bed fa-1"></i>
 
+      <i class="fa fa-bed fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bed</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bed
 
       fa-bed
 
       <small>
 
       <small>
 
-        <i class="fa fa-bed"></i> &middot;
 
+        <i class="fa fa-bed" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f236</span> &middot;
 
         Unicode: <span class="upper">f236</span> &middot;
 
         Created: v4.3 &middot;
 
         Created: v4.3 &middot;
 
         Categories:
 
         Categories:
 
@@ -199,13 +220,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bed"></i> fa-bed
 
+            <i class="fa fa-bed" aria-hidden="true"></i><span class="sr-only">Example of bed</span> fa-bed
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bed&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bed&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -237,7 +263,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/beer/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-beer fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-beer fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of beer at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-beer fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-beer fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-beer fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-beer fa-2"></i>&nbsp;
 
+        <i class="fa fa-beer fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of beer at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-beer fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of beer at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-beer fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of beer at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-beer fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of beer at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-beer fa-1"></i>
 
+      <i class="fa fa-beer fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of beer</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-beer
 
       fa-beer
 
       <small>
 
       <small>
 
-        <i class="fa fa-beer"></i> &middot;
 
+        <i class="fa fa-beer" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0fc</span> &middot;
 
         Unicode: <span class="upper">f0fc</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-beer"></i> fa-beer
 
+            <i class="fa fa-beer" aria-hidden="true"></i><span class="sr-only">Example of beer</span> fa-beer
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-beer&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-beer&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/behance-square/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-behance-square fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-behance-square fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of behance-square at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-behance-square fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-behance-square fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-behance-square fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-behance-square fa-2"></i>&nbsp;
 
+        <i class="fa fa-behance-square fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of behance-square at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-behance-square fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of behance-square at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-behance-square fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of behance-square at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-behance-square fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of behance-square at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-behance-square fa-1"></i>
 
+      <i class="fa fa-behance-square fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of behance-square</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-behance-square
 
       fa-behance-square
 
       <small>
 
       <small>
 
-        <i class="fa fa-behance-square"></i> &middot;
 
+        <i class="fa fa-behance-square" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1b5</span> &middot;
 
         Unicode: <span class="upper">f1b5</span> &middot;
 
         Created: v4.1 &middot;
 
         Created: v4.1 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-behance-square"></i> fa-behance-square
 
+            <i class="fa fa-behance-square" aria-hidden="true"></i><span class="sr-only">Example of behance-square</span> fa-behance-square
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-behance-square&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-behance-square&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/behance/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-behance fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-behance fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of behance at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-behance fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-behance fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-behance fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-behance fa-2"></i>&nbsp;
 
+        <i class="fa fa-behance fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of behance at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-behance fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of behance at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-behance fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of behance at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-behance fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of behance at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-behance fa-1"></i>
 
+      <i class="fa fa-behance fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of behance</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-behance
 
       fa-behance
 
       <small>
 
       <small>
 
-        <i class="fa fa-behance"></i> &middot;
 
+        <i class="fa fa-behance" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1b4</span> &middot;
 
         Unicode: <span class="upper">f1b4</span> &middot;
 
         Created: v4.1 &middot;
 
         Created: v4.1 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-behance"></i> fa-behance
 
+            <i class="fa fa-behance" aria-hidden="true"></i><span class="sr-only">Example of behance</span> fa-behance
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-behance&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-behance&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bell-o/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bell-o fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bell-o fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bell-o at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bell-o fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bell-o fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bell-o fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bell-o fa-2"></i>&nbsp;
 
+        <i class="fa fa-bell-o fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-o at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bell-o fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bell-o at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bell-o fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-o at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bell-o fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-o at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bell-o fa-1"></i>
 
+      <i class="fa fa-bell-o fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bell-o</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bell-o
 
       fa-bell-o
 
       <small>
 
       <small>
 
-        <i class="fa fa-bell-o"></i> &middot;
 
+        <i class="fa fa-bell-o" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0a2</span> &middot;
 
         Unicode: <span class="upper">f0a2</span> &middot;
 
         Created: v3.0 &middot;
 
         Created: v3.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bell-o"></i> fa-bell-o
 
+            <i class="fa fa-bell-o" aria-hidden="true"></i><span class="sr-only">Example of bell-o</span> fa-bell-o
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell-o&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell-o&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bell-slash-o/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bell-slash-o fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bell-slash-o fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bell-slash-o at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bell-slash-o fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bell-slash-o fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bell-slash-o fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bell-slash-o fa-2"></i>&nbsp;
 
+        <i class="fa fa-bell-slash-o fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-slash-o at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bell-slash-o fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bell-slash-o at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bell-slash-o fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-slash-o at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bell-slash-o fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-slash-o at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bell-slash-o fa-1"></i>
 
+      <i class="fa fa-bell-slash-o fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bell-slash-o</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bell-slash-o
 
       fa-bell-slash-o
 
       <small>
 
       <small>
 
-        <i class="fa fa-bell-slash-o"></i> &middot;
 
+        <i class="fa fa-bell-slash-o" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1f7</span> &middot;
 
         Unicode: <span class="upper">f1f7</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bell-slash-o"></i> fa-bell-slash-o
 
+            <i class="fa fa-bell-slash-o" aria-hidden="true"></i><span class="sr-only">Example of bell-slash-o</span> fa-bell-slash-o
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell-slash-o&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell-slash-o&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bell-slash/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bell-slash fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bell-slash fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bell-slash at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bell-slash fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bell-slash fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bell-slash fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bell-slash fa-2"></i>&nbsp;
 
+        <i class="fa fa-bell-slash fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-slash at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bell-slash fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bell-slash at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bell-slash fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-slash at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bell-slash fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell-slash at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bell-slash fa-1"></i>
 
+      <i class="fa fa-bell-slash fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bell-slash</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bell-slash
 
       fa-bell-slash
 
       <small>
 
       <small>
 
-        <i class="fa fa-bell-slash"></i> &middot;
 
+        <i class="fa fa-bell-slash" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1f6</span> &middot;
 
         Unicode: <span class="upper">f1f6</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bell-slash"></i> fa-bell-slash
 
+            <i class="fa fa-bell-slash" aria-hidden="true"></i><span class="sr-only">Example of bell-slash</span> fa-bell-slash
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell-slash&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell-slash&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bell/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bell fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bell fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bell at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bell fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bell fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bell fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bell fa-2"></i>&nbsp;
 
+        <i class="fa fa-bell fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bell fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bell at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bell fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bell fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bell at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bell fa-1"></i>
 
+      <i class="fa fa-bell fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bell</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bell
 
       fa-bell
 
       <small>
 
       <small>
 
-        <i class="fa fa-bell"></i> &middot;
 
+        <i class="fa fa-bell" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f0f3</span> &middot;
 
         Unicode: <span class="upper">f0f3</span> &middot;
 
         Created: v2.0 &middot;
 
         Created: v2.0 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bell"></i> fa-bell
 
+            <i class="fa fa-bell" aria-hidden="true"></i><span class="sr-only">Example of bell</span> fa-bell
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bell&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bicycle/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bicycle fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bicycle fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bicycle at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bicycle fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bicycle fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bicycle fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bicycle fa-2"></i>&nbsp;
 
+        <i class="fa fa-bicycle fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bicycle at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bicycle fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bicycle at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bicycle fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bicycle at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bicycle fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bicycle at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bicycle fa-1"></i>
 
+      <i class="fa fa-bicycle fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bicycle</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bicycle
 
       fa-bicycle
 
       <small>
 
       <small>
 
-        <i class="fa fa-bicycle"></i> &middot;
 
+        <i class="fa fa-bicycle" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f206</span> &middot;
 
         Unicode: <span class="upper">f206</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -196,13 +217,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bicycle"></i> fa-bicycle
 
+            <i class="fa fa-bicycle" aria-hidden="true"></i><span class="sr-only">Example of bicycle</span> fa-bicycle
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bicycle&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bicycle&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -234,7 +260,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/binoculars/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-binoculars fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-binoculars fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of binoculars at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-binoculars fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-binoculars fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-binoculars fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-binoculars fa-2"></i>&nbsp;
 
+        <i class="fa fa-binoculars fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of binoculars at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-binoculars fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of binoculars at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-binoculars fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of binoculars at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-binoculars fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of binoculars at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-binoculars fa-1"></i>
 
+      <i class="fa fa-binoculars fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of binoculars</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-binoculars
 
       fa-binoculars
 
       <small>
 
       <small>
 
-        <i class="fa fa-binoculars"></i> &middot;
 
+        <i class="fa fa-binoculars" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1e5</span> &middot;
 
         Unicode: <span class="upper">f1e5</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-binoculars"></i> fa-binoculars
 
+            <i class="fa fa-binoculars" aria-hidden="true"></i><span class="sr-only">Example of binoculars</span> fa-binoculars
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-binoculars&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-binoculars&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/birthday-cake/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-birthday-cake fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-birthday-cake fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of birthday-cake at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-birthday-cake fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-birthday-cake fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-birthday-cake fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-birthday-cake fa-2"></i>&nbsp;
 
+        <i class="fa fa-birthday-cake fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of birthday-cake at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-birthday-cake fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of birthday-cake at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-birthday-cake fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of birthday-cake at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-birthday-cake fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of birthday-cake at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-birthday-cake fa-1"></i>
 
+      <i class="fa fa-birthday-cake fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of birthday-cake</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-birthday-cake
 
       fa-birthday-cake
 
       <small>
 
       <small>
 
-        <i class="fa fa-birthday-cake"></i> &middot;
 
+        <i class="fa fa-birthday-cake" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f1fd</span> &middot;
 
         Unicode: <span class="upper">f1fd</span> &middot;
 
         Created: v4.2 &middot;
 
         Created: v4.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-birthday-cake"></i> fa-birthday-cake
 
+            <i class="fa fa-birthday-cake" aria-hidden="true"></i><span class="sr-only">Example of birthday-cake</span> fa-birthday-cake
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-birthday-cake&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-birthday-cake&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bitbucket-square/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bitbucket-square fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bitbucket-square fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bitbucket-square at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bitbucket-square fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bitbucket-square fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bitbucket-square fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bitbucket-square fa-2"></i>&nbsp;
 
+        <i class="fa fa-bitbucket-square fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bitbucket-square at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bitbucket-square fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bitbucket-square at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bitbucket-square fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bitbucket-square at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bitbucket-square fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bitbucket-square at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bitbucket-square fa-1"></i>
 
+      <i class="fa fa-bitbucket-square fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bitbucket-square</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bitbucket-square
 
       fa-bitbucket-square
 
       <small>
 
       <small>
 
-        <i class="fa fa-bitbucket-square"></i> &middot;
 
+        <i class="fa fa-bitbucket-square" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f172</span> &middot;
 
         Unicode: <span class="upper">f172</span> &middot;
 
         Created: v3.2 &middot;
 
         Created: v3.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bitbucket-square"></i> fa-bitbucket-square
 
+            <i class="fa fa-bitbucket-square" aria-hidden="true"></i><span class="sr-only">Example of bitbucket-square</span> fa-bitbucket-square
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bitbucket-square&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bitbucket-square&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

+ 63 - 37
icon/bitbucket/index.html
View File 

@@ -84,10 +84,10 @@
 
   <div class="container">
 
   <div class="container">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
       <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>
 
         <span class="sr-only">Toggle navigation</span>
 
-        <i class="fa fa-bars fa-lg"></i>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
 
+      <a class="navbar-brand" href="../../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
 
     </div>
 
     </div>
 
 
 
     <div class="navbar-collapse collapse">
 
     <div class="navbar-collapse collapse">
 
@@ -99,37 +99,47 @@
 
         <li class="hidden-xs hidden-md hidden-lg">
 
         <li class="hidden-xs hidden-md hidden-lg">
 
           <a href="../../whats-new/">New</a>
 
           <a href="../../whats-new/">New</a>
 
         </li>
 
         </li>
 
-        <li><a href="../../get-started/">Get Started</a></li>
 
+
 
+        <li class="hidden-sm"><a href="../../get-started/">Get Started</a></li>
 
+        <li class="hidden-xs hidden-md hidden-lg">
 
+          <a href="../../get-started/">Start</a>
 
+        </li>
 
+
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown-split-left"><a href="../../icons/">Icons</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
-            <li><a href="../../icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li>
 
+            <li><a href="../../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
 
             <li class="divider"></li>
 
             <li class="divider"></li>
 
-            <li><a href="../../icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in 4.5</a></li>
 
-            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li>
 
-            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li>
 
-            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li>
 
-            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li>
 
-            <li><a href="../../icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li>
 
-            <li><a href="../../icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li>
 
-            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li>
 
-            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li>
 
-            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li>
 
-            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li>
 
-            <li><a href="../../icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li>
 
-            <li><a href="../../icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li>
 
-            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li>
 
-            <li><a href="../../icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li>
 
-            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li>
 
+            <li><a href="../../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
 
+            <li><a href="../../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
 
+            <li><a href="../../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
 
+            <li><a href="../../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
 
+            <li><a href="../../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
 
+            <li><a href="../../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
 
+            <li><a href="../../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="../../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
 
+            <li><a href="../../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
 
+            <li><a href="../../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
 
+            <li><a href="../../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
 
+            <li><a href="../../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
 
+            <li><a href="../../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="../../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
 
+            <li><a href="../../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
 
+            <li><a href="../../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
 
+            <li><a href="../../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown-split-left"><a href="../../examples/">Examples</a></li>
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
         <li class="dropdown dropdown-split-right hidden-xs">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
-            <i class="fa fa-caret-down"></i>
 
+            <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>
 
           </a>
 
           <ul class="dropdown-menu pull-right">
 
           <ul class="dropdown-menu pull-right">
 
             <li><a href="../../examples/">Examples</a></li>
 
             <li><a href="../../examples/">Examples</a></li>
 
@@ -140,18 +150,17 @@
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#list">List Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
             <li><a href="../../examples/#animated">Animated Icons</a></li>
 
+            <li><a href="../../examples/#accessible">Accessibility-Minded</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#stacked">Stacked Icons</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#bootstrap">Bootstrap 3 Examples</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
             <li><a href="../../examples/#custom">Custom CSS</a></li>
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
+        <li><a href="../../accessibility/">Accessibility</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../community/">Community</a></li>
 
         <li><a href="../../license/">License</a></li>
 
         <li><a href="../../license/">License</a></li>
 
       </ul>
 
       </ul>
 
-      <ul class="nav navbar-nav navbar-right">
 
-        <li><a href="http://blog.fontawesome.io">Blog</a></li>
 
-      </ul>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </div>
 
 </div>
 
@@ -160,19 +169,31 @@
 
     <div class="jumbotron jumbotron-icon">
 
     <div class="jumbotron jumbotron-icon">
 
   <div class="container">
 
   <div class="container">
 
     <div class="info-icons">
 
     <div class="info-icons">
 
-      <i class="fa fa-bitbucket fa-6"></i>&nbsp;&nbsp;
 
+      <i class="fa fa-bitbucket fa-6 aria-hidden="true""></i>
 
+      <span class="sr-only">Example of bitbucket at 6x</span>&nbsp;&nbsp;
 
       <span class="hide-xs">
 
       <span class="hide-xs">
 
-        <i class="fa fa-bitbucket fa-5"></i>&nbsp;&nbsp;
 
-        <span class="hide-sm"><i class="fa fa-bitbucket fa-4"></i>&nbsp;&nbsp;</span>
 
-        <i class="fa fa-bitbucket fa-3"></i>&nbsp;&nbsp;
 
-        <i class="fa fa-bitbucket fa-2"></i>&nbsp;
 
+        <i class="fa fa-bitbucket fa-5 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bitbucket at 5x</span>
 
+        &nbsp;&nbsp;
 
+        <span class="hide-sm">
 
+          <i class="fa fa-bitbucket fa-4 aria-hidden="true""></i>
 
+          <span class="sr-only">Example of bitbucket at 4x</span>
 
+          &nbsp;&nbsp;
 
+        </span>
 
+        <i class="fa fa-bitbucket fa-3 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bitbucket at 3x</span>
 
+        &nbsp;&nbsp;
 
+        <i class="fa fa-bitbucket fa-2 aria-hidden="true""></i>
 
+        <span class="sr-only">Example of bitbucket at 2x</span>
 
+        &nbsp;
 
       </span>
 
       </span>
 
-      <i class="fa fa-bitbucket fa-1"></i>
 
+      <i class="fa fa-bitbucket fa-1" aria-hidden="true"></i>
 
+      <span class="sr-only">Example of bitbucket</span>
 
     </div>
 
     </div>
 
     <h1 class="info-class">
 
     <h1 class="info-class">
 
       fa-bitbucket
 
       fa-bitbucket
 
       <small>
 
       <small>
 
-        <i class="fa fa-bitbucket"></i> &middot;
 
+        <i class="fa fa-bitbucket" aria-hidden="true"></i> &middot;
 
         Unicode: <span class="upper">f171</span> &middot;
 
         Unicode: <span class="upper">f171</span> &middot;
 
         Created: v3.2 &middot;
 
         Created: v3.2 &middot;
 
         Categories:
 
         Categories:
 
@@ -194,13 +215,18 @@
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <p>After you get <a href="../../get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
 
         <div class="well well-transparent">
 
         <div class="well well-transparent">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
           <div style="font-size: 24px; line-height: 1.5em;">
 
-            <i class="fa fa-bitbucket"></i> fa-bitbucket
 
+            <i class="fa fa-bitbucket" aria-hidden="true"></i><span class="sr-only">Example of bitbucket</span> fa-bitbucket
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bitbucket&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
+<div class="highlight"><pre><code class="html"><span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">&quot;fa fa-bitbucket&quot;</span> <span class="na">aria-hidden=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;&lt;/i&gt;</span>
 
 </code></pre></div>
 
 </code></pre></div>
 
-        <br>
 
-        <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.</div>
 
+        <p class="margin-bottom-lg">
 
+          <small class="text-muted">Note: to improve <a href="../../accessibility/">web accessibility</a>, we recommend using <strong>aria-hidden="true"</strong> to hide icons used purely for decoration.</small>
 
+        </p>
 
+
 
+        <div class="lead">
 
+          <i class="fa fa-info-circle" aria-hidden"true"></i> Looking for more? Check out the <a href="../../examples/">examples</a>.
 
+        </div>
 
       </div>
 
       </div>
 
       <div class="col-md-3 col-sm-3">
 
       <div class="col-md-3 col-sm-3">
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
         <div class="vertical-ad"><script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
 
@@ -232,7 +258,7 @@
 
       </a>
 
       </a>
 
     </div>
 
     </div>
 
     <div>
 
     <div>
 
-      <i class="fa fa-flag"></i> Font Awesome 4.5.0
 
+      <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       <span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
       Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
 
     </div>
 
     </div>

Some files were not shown because too many files changed in this diff