--- /dev/null
+<div id="background">
+ <h2 class="page-header">Icon Fonts & 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>
--- /dev/null
+<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="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>.
+ </p>
+</div>
--- /dev/null
+<div id="using-with-accessibility">
+ <h2 class="page-header">Using Font Awesome with Acessibility in mind</h2>
+ <p>
+ When using icons in your UI, there are ways to help assistive technology either ignore or better understand Font Awesome.
+ </p>
+
+ <h3>Icons used for pure decoration or visual styling</h3>
+ <p>
+ If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup.
+ </p>
+
+ <div class="margin-top-lg margin-bottom-lg">
+{% highlight html %}
+<i class="fa fa-fighter-jet" aria-hidden="true"></i>
+{% endhighlight %}
+<small class="text-muted">an icon being used as pure decoration</small>
+ </div>
+
+ <div class="margin-bottom-lg">
+{% highlight html %}
+<h1 class="logo">
+ <i class="fa fa-pied-piper" aria-hidden="true"></i>
+ Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
+</h1>
+{% endhighlight %}
+<small class="text-muted">an icon being used as a logo</small>
+ </div>
+
+ <div class="margin-bottom-lg">
+{% highlight html %}
+<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
+{% endhighlight %}
+<small class="text-muted">an icon being used in front of link text</small>
+ </div>
+
+ <h3>Icons 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">
+{% highlight html %}
+<dl>
+ <dt>
+ <i class="fa fa-car" aria-hidden="true"></i>
+ <span class="sr-only">Time to destination by car:</span>
+ </dt>
+ <dd>4 minutes</dd>
+
+ <dt>
+ <i class="fa fa-bicycle" aria-hidden="true"></i>
+ <span class="sr-only">Time to destination by bike:</span>
+ </dt>
+ <dd>12 minutes</dd>
+</dl>
+{% endhighlight %}
+ <small class="text-muted">an icon being used to communicate travel methods</small>
+ </div>
+
+ <div class="margin-bottom-lg margin-top-lg">
+{% highlight html %}
+<i class="fa fa-hourglass" aria-hidden="true"></i>
+<span class="sr-only">60 minutes remains in your exam</span>
+
+<i class="fa fa-hourglass-half" aria-hidden="true"></i>
+<span class="sr-only">30 minutes remains in your exam</span>
+
+<i class="fa fa-hourglass-end" aria-hidden="true"></i>
+<span class="sr-only">0 minutes remains in your exam</span>
+{% endhighlight %}
+ <small class="text-muted">an icon being used to denote time remaining</small>
+ </div>
+
+ <h4>If an icon represents an interactive element</h4>
+ <p>
+ In 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">
+{% highlight html %}
+<a href="path/to/shopping/cart">
+ <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
+ <span class="sr-only">View 3 items in your shopping cart</span>
+</a>
+{% endhighlight %}
+ <small class="text-muted">an icon being used to communicate shopping cart state</small>
+ </div>
+
+ <div class="margin-bottom-lg margin-top-lg">
+{% highlight html %}
+<a href="#navigation-main">
+ <i class="fa fa-bars" title="Skip to main navigation" aria-hidden="true"></i>
+ <span class="sr-only">Skip to main navigation</span>
+</a>
+{% endhighlight %}
+ <small class="text-muted">an icon being used as a link to a navigation menu</small>
+
+{% highlight html %}
+<a class="btn btn-danger" href="path/to/settings">
+ <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
+ <span class="sr-only">Delete</span>
+</a>
+{% endhighlight %}
+ <small class="text-muted">an icon being used as a delete button's symbol</small>
+
+ </div>
+</div>
+
+<div class="alert alert-success">
+ <ul class="fa-ul margin-bottom-none">
+ <li>
+ <i class="fa-li fa fa-info-circle fa-lg" aria-hidden="true"></i>
+ Bootstrap comes with a <a href="http://getbootstrap.com/css/#callout-has-feedback-icon-accessibility">utility class to visually hide content, but 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="{{ page.relative_path }}examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI.
+ </li>
+ </ul>
+</div>
-<h4><i class="fa fa-warning"></i> Warning!</h4>
+<h4><i class="fa fa-warning" aria-hidden"true"></i> Warning!</h4>
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
Media Buttons" setting. We will not use hacks to force them to display. Please
<a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be
</ul>
</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>
</ol>
</section>
--- /dev/null
+<section id="accessible">
+ <h2 class="page-header">
+ Accessibility-Minded
+ </h2>
+ <div class="row">
+ <div class="col-md-3 col-sm-4">
+ <p>
+ <a class="btn btn-default" href="path/to/settings">
+ <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
+ <span class="sr-only">Settings</span>
+ </a>
+
+ <a class="btn btn-danger" href="path/to/settings">
+ <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
+ <span class="sr-only">Delete</span>
+ </a>
+
+ <a class="btn btn-primary" href="#navigation-main">
+ <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
+ <span class="sr-only">Skip to main navigation</span>
+ </a>
+ </p>
+
+ <p>
+ <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+ <span class="sr-only">Refreshing...</span>
+
+ <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+ <span class="sr-only">Saving. Hang tight!</span>
+ </p>
+
+ <p>
+ <div class="input-group margin-bottom-sm">
+ <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
+ <input class="form-control" type="text" placeholder="Email address">
+ </div>
+ <div class="input-group">
+ <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
+ <input class="form-control" type="password" placeholder="Password">
+ </div>
+ </p>
+
+ <p>
+ <a href="path/to/shopping/cart" class="btn btn-primary">
+ <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
+ <span class="sr-only">View 3 items in your shopping cart</span>
+ </a>
+ </p>
+
+ <p>
+ <i class="fa fa-battery-half" aria-hidden="true"></i>
+ <span class="sr-only">Battery level: 50%</span>
+ </p>
+ </div>
+ <div class="col-md-9 col-sm-8">
+ <p>
+ With <a href="{{ page.relative_path }}accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
+ </p>
+
+{% highlight html %}
+<a class="btn btn-default" href="path/to/settings">
+ <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
+ <span class="sr-only">Settings</span>
+</a>
+
+<a class="btn btn-danger" href="path/to/settings">
+ <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
+ <span class="sr-only">Delete</span>
+</a>
+
+<a class="btn btn-primary" href="#navigation-main">
+ <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
+ <span class="sr-only">Skip to main navigation</span>
+</a>
+{% endhighlight %}
+
+{% highlight html %}
+<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"</i>
+<span class="sr-only">Refreshing...</span>
+
+<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
+<span class="sr-only">Saving. Hang tight!</span>
+{% endhighlight %}
+
+{% highlight html %}
+<div class="input-group margin-bottom-sm">
+ <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
+ <input class="form-control" type="text" placeholder="Email address">
+</div>
+<div class="input-group">
+ <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
+ <input class="form-control" type="password" placeholder="Password">
+</div>
+{% endhighlight %}
+
+{% highlight html %}
+<a href="path/to/shopping/cart" class="btn btn-primary">
+ <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
+ <span class="sr-only">View 3 items in your shopping cart</span>
+</a>
+{% endhighlight %}
+
+{% highlight html %}
+<i class="fa fa-battery-half" aria-hidden="true"></i>
+<span class="sr-only">Battery level: 50%</span>
+{% endhighlight %}
+ </div>
+ </div>
+</section>
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
+ <span class="sr-only">Loading example (with fa-spinner icon)</span>
+
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
+ <span class="sr-only">Loading (with fa-circle-o-notch icon)</span>
+
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
+ <span class="sr-only">Loading example (with fa-refresh icon)</span>
+
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
+ <span class="sr-only">Loading example (with fa-cog icon)</span>
+
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+ <span class="sr-only">Loading example (with fa-spinner icon)</span>
</p>
</div>
<div class="col-md-9 col-sm-8">
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
</p>
{% highlight html %}
-<i class="fa fa-spinner fa-spin"></i>
-<i class="fa fa-circle-o-notch fa-spin"></i>
-<i class="fa fa-refresh fa-spin"></i>
-<i class="fa fa-cog fa-spin"></i>
-<i class="fa fa-spinner fa-pulse"></i>
+<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
+
+<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+<span class="sr-only">Loading...</span>
{% endhighlight %}
<p class="alert alert-success">
- <i class="fa fa-exclamation-triangle fa-lg"></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.
</p>
<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>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4">
<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>
</div>
<div class="col-md-9 col-sm-8">
brevity, but using a <code><span></code> is more semantically correct).
</p>
{% highlight html %}
-<i class="fa fa-camera-retro"></i> fa-camera-retro
+<i class="fa fa-camera-retro" aria-hidden="true"></i> fa-camera-retro
{% endhighlight %}
<div class="alert alert-success">
<ul class="fa-ul">
<li>
- <i class="fa fa-info-circle fa-lg fa-li"></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,
drop shadow, and anything else that gets inherited using CSS.
</li>
<div class="col-md-3 col-sm-4">
<p>
<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="#">
- <i class="fa fa-cog"></i> Settings</a>
+ <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
</p>
<p>
<a class="btn btn-lg btn-success" href="#">
- <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+ <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p>
<div class="margin-bottom">
<div class="btn-group">
- <a class="btn btn-default" href="#"><i class="fa fa-align-left"></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 class="margin-bottom">
<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">
</div>
<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">
</div>
</div>
<div class="margin-bottom">
<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="#">
- <span class="fa fa-caret-down"></span></a>
+ <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
+ </a>
<ul class="dropdown-menu">
- <li><a href="#"><i class="fa fa-pencil fa-fw"></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><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>
</div>
</div>
</p>
{% highlight html %}
<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="#">
- <i class="fa fa-cog"></i> Settings</a>
+ <i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
- <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
+ <i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<div class="btn-group">
- <a class="btn btn-default" href="#"><i class="fa fa-align-left"></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 class="input-group margin-bottom-sm">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
- <span class="fa fa-caret-down"></span></a>
+ <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
+ </a>
<ul class="dropdown-menu">
- <li><a href="#"><i class="fa fa-pencil fa-fw"></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><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>
</div>
{% endhighlight %}
<section id="bordered-pulled">
<h2 class="page-header">
- Bordered & Pulled Icons
+ Bordered & Pulled Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
<div class="row">
<div class="col-md-3 col-sm-4">
<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>
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
</p>
article icons.
</p>
{% highlight html %}
-<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>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="list-group">
- <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
- <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
- <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
- <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
+ <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidde="true"></i> Home</a>
+ <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidde="true"></i> Library</a>
+ <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidde="true"></i> Applications</a>
+ <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidde="true"></i> Settings</a>
</div>
</div>
<div class="col-md-9 col-sm-8">
</p>
{% highlight html %}
<div class="list-group">
- <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
- <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
- <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
- <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
+ <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
+ <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
+ <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
+ <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
{% endhighlight %}
</div>
</h2>
<div class="row">
<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 class="col-md-9 col-sm-8">
<p>
<div class="row">
<div class="col-md-3 col-sm-4">
<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>
</div>
<div class="col-md-9 col-sm-8">
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
{% highlight html %}
<ul class="fa-ul">
- <li><i class="fa-li fa fa-check-square"></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>
{% endhighlight %}
</div>
<div class="row">
<div class="col-md-3 col-sm-4">
<p style="font-size: 18px;">
- <i class="fa fa-shield"></i> normal<br>
- <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
- <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
- <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
- <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
- <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
+ <i class="fa fa-shield" aria-hidden="true"></i> normal<br>
+ <i class="fa fa-shield fa-rotate-90" aria-hidden="true"></i> fa-rotate-90<br>
+ <i class="fa fa-shield fa-rotate-180" aria-hidden="true"></i> fa-rotate-180<br>
+ <i class="fa fa-shield fa-rotate-270" aria-hidden="true"></i> fa-rotate-270<br>
+ <i class="fa fa-shield fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal<br>
+ <i class="fa fa-shield fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical
</p>
</div>
<div class="col-md-9 col-sm-8">
<div class="row">
<div class="col-md-3 col-sm-4">
<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-twitter fa-stack-1x"></i>
</span>
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-flag fa-stack-1x fa-inverse"></i>
</span>
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-terminal fa-stack-1x fa-inverse"></i>
</span>
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-ban fa-stack-2x text-danger"></i>
</span>
</a>
</div>
<div>
- <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
+ <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome {{ site.fontawesome.version }}
<span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg">
Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div>
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% for icon in icons_brand %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
{% for icon in icons_chart %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}
{% for icon in icons_file_type %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}
{% for icon in icons_form_control %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>
{% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
{% for icon in icons_gender %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}
{% for icon in icons_hand %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}
{% for icon in icons_new %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
{% for icon in icons_payment %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
<div class="alert alert-success">
<ul class="fa-ul">
<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">Note:</strong>
These icons work great with the <code>fa-spin</code> class. Check out the
<a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
</li>
{% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
{% for icon in icons_spinner %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
{% for icon in icons_text_editor %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
{% for icon in icons_transportation %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
{% for icon in icons_video_player %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
{% for icon in icons_web_application %}
- <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
+ <div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
<div class="actions">
<a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
- <i class="fa fa-download fa-lg"></i>
+ <i class="fa fa-download fa-lg" aria-hidden="true"></i>
Download
</a>
</div>
<div id="icon-carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
- <div class="active item"><div><i class="fa fa-flag"></i></div></div>
- <div class="item"><div><i class="fa fa-fort-awesome"></i></div></div>
- <div class="item"><div><i class="fa fa-sticky-note"></i></div></div>
- <div class="item"><div><i class="fa fa-commenting"></i></div></div>
- <div class="item"><div><i class="fa fa-map-signs"></i></div></div>
- <div class="item"><div><i class="fa fa-envelope"></i></div></div>
- <div class="item"><div><i class="fa fa-send-o"></i></div></div>
- <div class="item"><div><i class="fa fa-book"></i></div></div>
- <div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
- <div class="item"><div><i class="fa fa-beer"></i></div></div>
- <div class="item"><div><i class="fa fa-heart-o"></i></div></div>
- <div class="item"><div><i class="fa fa-thumbs-o-up"></i></div></div>
- <div class="item"><div><i class="fa fa-pied-piper-alt"></i></div></div>
+ <div class="active item"><div><i class="fa fa-flag" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
+ <div class="item"><div><i class="fa fa-fort-awesome" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
+ <div class="item"><div><i class="fa fa-sticky-note" aria-hidden="true"></i><span class="sr-only">sticky note icon</span></div></div>
+ <div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div>
+ <div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div>
+ <div class="item"><div><i class="fa fa-envelope" aria-hidden="true"></i><span class="sr-only">envelope icon</span></div></div>
+ <div class="item"><div><i class="fa fa-send-o" aria-hidden="true"></i><span class="sr-only">send icon</span></div></div>
+ <div class="item"><div><i class="fa fa-book" aria-hidden="true"></i><span class="sr-only">book icon</span></div></div>
+ <div class="item"><div><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">fighter jet icon</span></div></div>
+ <div class="item"><div><i class="fa fa-beer" aria-hidden="true"></i><span class="sr-only">beer icon</span></div></div>
+ <div class="item"><div><i class="fa fa-heart-o" aria-hidden="true"></i><span class="sr-only">heart icon</span></div></div>
+ <div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
+ <div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#icon-carousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
- <i class="fa fa-arrow-circle-left"></i></a>
+ <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
+ <span class="sr-only">Previous</span>
+ </a>
<a class="carousel-control right" href="#icon-carousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
- <i class="fa fa-arrow-circle-right"></i></a>
+ <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
+ <span class="sr-only">Next</span>
+ </a>
</div>
</div>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
<h2 class="modal-title" id="modal-download-label">
- <i class="fa fa-download fa-lg"></i>
+ <i class="fa fa-download fa-lg" aria-hidden="true"></i>
Download
</h2>
</div>
<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>
- <i class="fa fa-bars fa-lg"></i>
</button>
- <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
+ <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
</div>
<div class="navbar-collapse collapse">
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}">
<a href="{{ page.relative_path }}whats-new/">New</a>
</li>
- <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
+
+ <li class="hidden-sm{% if page.navbar_active == "get-started" %} active{% endif %}"><a href="{{ page.relative_path }}get-started/">Get Started</a></li>
+ <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "get-started" %} active{% endif %}">
+ <a href="{{ page.relative_path }}get-started/">Start</a>
+ </li>
+
<li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-caret-down"></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>
<ul class="dropdown-menu pull-right">
- <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i> All Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> All Icons</a></li>
<li class="divider"></li>
- <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li>
- <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i> Web Application Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i> Hand Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i> Transportation Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw"></i> Gender Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i> File Type Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i> Spinner Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i> Form Control Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i> Payment Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i> Chart Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i> Currency Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i> Text Editor Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw"></i> Directional Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i> Video Player Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i> Brand Icons</a></li>
- <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></i> Medical Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw" aria-hidden="true"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li>
+ <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i> Web Application Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i> Hand Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i> Transportation Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i> Gender Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw" aria-hidden="true"></i> File Type Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i> Spinner Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i> Form Control Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i> Payment Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i> Chart Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i> Currency Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i> Text Editor Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i> Directional Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i> Video Player Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw" aria-hidden="true"></i> Brand Icons</a></li>
+ <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i> Medical Icons</a></li>
</ul>
</li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-caret-down"></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>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#animated">Animated Icons</a></li>
+ <li><a href="{{ page.relative_path }}examples/#accessible">Accessibility-Minded</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated & Flipped Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul>
</li>
+ <li{% if page.navbar_active == "accessibility" %} class="active"{% endif %}><a href="{{ page.relative_path }}accessibility/">Accessibility</a></li>
<li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul>
- <ul class="nav navbar-nav navbar-right">
- <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
- </ul>
</div>
</div>
</div>
<section id="whats-new" class="feature-list">
<div class="row">
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-file-text-o"></i> Completely Rewritten</h4>
+ <h4><i class="fa fa-file-text-o" aria-hidden="true"></i> Completely Rewritten</h4>
Everything re-written from the ground up for speed and simplicity.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4>
+ <h4><i class="fa fa-fighter-jet" aria-hidden="true"></i> CSS Best Practices</h4>
New icon base class allows simpler CSS, faster rendering, and easier control.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-terminal"></i> New Icon Names</h4>
+ <h4><i class="fa fa-terminal" aria-hidden="true"></i> New Icon Names</h4>
Icons have been renamed to improve consistency and predictability.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-thumbs-o-up"></i> Bootstrap 3</h4>
+ <h4><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Bootstrap 3</h4>
Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-code"></i> Better Compatibility</h4>
+ <h4><i class="fa fa-code" aria-hidden="true"></i> Better Compatibility</h4>
Font Awesome is now more compatible with all web frameworks, including Foundation.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
+ <h4><i class="fa fa-rub" aria-hidden="true"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
</div>
</div>
<p class="margin-bottom-sm">Solid icons as the base variant</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-bookmark fa-li"></i>
+ <i class="fa fa-bookmark fa-li" aria-hidden="true"></i>
fa-bookmark
</li>
<li>
- <i class="fa fa-comment fa-li"></i>
+ <i class="fa fa-comment fa-li" aria-hidden="true"></i>
fa-comment
</li>
<li>
- <i class="fa fa-folder fa-li"></i>
+ <i class="fa fa-folder fa-li" aria-hidden="true"></i>
fa-folder
</li>
</ul>
<p class="margin-bottom-sm">Outlined version of previous modifier</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-bookmark-o fa-li"></i>
+ <i class="fa fa-bookmark-o fa-li" aria-hidden="true"></i>
fa-bookmark-o
</li>
<li>
- <i class="fa fa-comment-o fa-li"></i>
+ <i class="fa fa-comment-o fa-li" aria-hidden="true"></i>
fa-comment-o
</li>
<li>
- <i class="fa fa-folder-o fa-li"></i>
+ <i class="fa fa-folder-o fa-li" aria-hidden="true"></i>
fa-folder-o
</li>
</ul>
<p class="margin-bottom-sm">Circle under previous modifier</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-check-circle fa-li"></i>
+ <i class="fa fa-check-circle fa-li" aria-hidden="true"></i>
fa-check-circle
</li>
<li>
- <i class="fa fa-exclamation-circle fa-li"></i>
+ <i class="fa fa-exclamation-circle fa-li" aria-hidden="true"></i>
fa-exclamation-circle
</li>
<li>
- <i class="fa fa-plus-circle fa-li"></i>
+ <i class="fa fa-plus-circle fa-li" aria-hidden="true"></i>
fa-plus-circle
</li>
</ul>
<p class="margin-bottom-sm">Square under previous modifier</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-check-square fa-li"></i>
+ <i class="fa fa-check-square fa-li" aria-hidden="true"></i>
fa-check-square
</li>
<li>
- <i class="fa fa-twitter-square fa-li"></i>
+ <i class="fa fa-twitter-square fa-li" aria-hidden="true"></i>
fa-twitter-square
</li>
<li>
- <i class="fa fa-plus-square fa-li"></i>
+ <i class="fa fa-plus-square fa-li" aria-hidden="true"></i>
fa-plus-square
</li>
</ul>
<p class="margin-bottom-sm">Directional modifier always at the end</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-arrow-right fa-li"></i>
+ <i class="fa fa-arrow-right fa-li" aria-hidden="true"></i>
fa-arrow-right
</li>
<li>
- <i class="fa fa-arrow-circle-right fa-li"></i>
+ <i class="fa fa-arrow-circle-right fa-li" aria-hidden="true"></i>
fa-arrow-circle-right
</li>
<li>
- <i class="fa fa-angle-double-right fa-li"></i>
+ <i class="fa fa-angle-double-right fa-li" aria-hidden="true"></i>
fa-angle-double-right
</li>
</ul>
<p class="margin-bottom-sm">Alternative to the original</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-unlock-alt fa-li"></i>
+ <i class="fa fa-unlock-alt fa-li" aria-hidden="true"></i>
fa-unlock-alt
</li>
<li>
- <i class="fa fa-list-alt fa-li"></i>
+ <i class="fa fa-list-alt fa-li" aria-hidden="true"></i>
fa-list-alt
</li>
<li>
- <i class="fa fa-github-alt fa-li"></i>
+ <i class="fa fa-github-alt fa-li" aria-hidden="true"></i>
fa-github-alt
</li>
</ul>
<p class="margin-bottom-sm">Horizontal & vertical modifiers</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-arrows-v fa-li"></i>
+ <i class="fa fa-arrows-v fa-li" aria-hidden="true"></i>
fa-arrows-v
</li>
<li>
- <i class="fa fa-arrows-h fa-li"></i>
+ <i class="fa fa-arrows-h fa-li" aria-hidden="true"></i>
fa-arrows-h
</li>
<li>
- <i class="fa fa-ellipsis-v fa-li"></i>
+ <i class="fa fa-ellipsis-v fa-li" aria-hidden="true"></i>
fa-ellipsis-v
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
- <h4 class="margin-bottom-sm">Combine 'em up...</h4>
+ <h4 class="margin-bottom-sm">Combine 'em up&helip;</h4>
<p class="margin-bottom-sm">Consistent when strung together</p>
<ul class="fa-ul padding-left-sm">
<li>
- <i class="fa fa-arrow-circle-o-right fa-li"></i>
+ <i class="fa fa-arrow-circle-o-right fa-li" aria-hidden="true"></i>
fa-arrow-circle-o-right
</li>
<li>
- <i class="fa fa-caret-square-o-right fa-li"></i>
+ <i class="fa fa-caret-square-o-right fa-li" aria-hidden="true"></i>
fa-caret-square-o-right
</li>
<li>
- <i class="fa fa-hand-o-right fa-li"></i>
+ <i class="fa fa-hand-o-right fa-li" aria-hidden="true"></i>
fa-hand-o-right
</li>
</ul>
<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 <i class="fa fa-envelope"></i>
+ Subscribe to Font Awesome Updates <i class="fa fa-envelope" aria-hidden="true"></i>
</button>
</div>
</div>
</p>
<div class="row">
<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>
Gittip is a great way to let developers know you appreciate their work.
</p>
-<a href="#"><i class="fa fa-flag"></i> normal</a><br>
-<a href="#"><i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90</a><br>
-<a href="#"><i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180</a><br>
-<a href="#"><i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270</a><br>
-<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal</a><br>
-<a href="#"><i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical</a>
+<a href="#"><i class="fa fa-flag" aria-hidden="true"></i> normal</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i> fa-rotate-90</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i> fa-rotate-180</a><br>
+<a href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i> fa-rotate-270</a><br>
+<a href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal</a><br>
+<a href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical</a>
-<a class="btn btn-default" href="#"><i class="fa fa-flag"></i> normal</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal</a><br>
-<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical</a>
+<a class="btn btn-default" href="#"><i class="fa fa-flag" aria-hidden="true"></i> normal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i> fa-rotate-90</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i> fa-rotate-180</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i> fa-rotate-270</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical</a>
-<i class="fa fa-flag"></i> normal<br>
-<i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90<br>
-<i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180<br>
-<i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270<br>
-<i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal<br>
-<i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical
+<i class="fa fa-flag" aria-hidden="true"></i> normal<br>
+<i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i> fa-rotate-90<br>
+<i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i> fa-rotate-180<br>
+<i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i> fa-rotate-270<br>
+<i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i> fa-flip-horizontal<br>
+<i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i> fa-flip-vertical
<p>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</p>
<p>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</p>
<p>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
</a>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
</a>
<a href="#">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
GitHub Icon
</a>
-</p>
\ No newline at end of file
+</p>
-<span class="fa-stack">
+<span class="fa-stack" aria-hidden="true">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<span class="fa-stack-1x padding-top-sm">27</span>
</span>
<span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center">
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span><br>Center
</span>
<hr>
<p>
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
- <span class="fa-stack">
+ <span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
</div>
<div class="col-md-4 col-sm-4">
<p>
- Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn"> </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"> </i>MaxCDN</a> for providing the excellent
<a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to
<a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p>
<section id="why" class="feature-list">
<div class="row">
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
+ <h4><i class="fa fa-flag" aria-hidden="true"></i> One Font, {{ icons | size }} Icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-ban"></i> No JavaScript Required</h4>
+ <h4><i class="fa fa-ban" aria-hidden="true"></i> No JavaScript Required</h4>
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-arrows-alt"></i> Infinite Scalability</h4>
+ <h4><i class="fa fa-arrows-alt" aria-hidden="true"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
+ <h4><i class="fa fa-microphone" aria-hidden="true"></i> Free, as in Speech</h4>
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-pencil"></i> CSS Control</h4>
+ <h4><i class="fa fa-pencil" aria-hidden="true"></i> CSS Control</h4>
Easily style icon color, size, shadow, and anything that's possible with CSS.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4>
+ <h4><i class="fa fa-eye" aria-hidden="true"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
+ <h4><i class="fa fa-gamepad" aria-hidden="true"></i> Plays Well with Others</h4>
Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
+ <h4><i class="fa fa-desktop" aria-hidden="true"></i> Desktop Friendly</h4>
To use on the desktop or for a complete set of vectors,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div>
<div class="col-md-4 col-sm-6">
- <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
- Font Awesome won't trip up screen readers, unlike other icon fonts.
+ <h4><i class="fa fa-wheelchair" aria-hidden="true"></i> Accessibility-minded</h4>
+ Font Awesome <i class="fa fa-heart" aria-hidden="true"></i><span class="sr-only">loves</span> screen readers and
+<a href="{{ page.relative_path }}accessibility/">helps make your icons accessible</a> on the web.
</div>
</div>
</section>
<div class="jumbotron jumbotron-icon">
<div class="container">
<div class="info-icons">
- <i class="fa fa-{{ page.icon.id }} fa-6"></i>
+ <i class="fa fa-{{ page.icon.id }} fa-6 aria-hidden="true""></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 6x</span>
<span class="hide-xs">
- <i class="fa fa-{{ page.icon.id }} fa-5"></i>
- <span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i> </span>
- <i class="fa fa-{{ page.icon.id }} fa-3"></i>
- <i class="fa fa-{{ page.icon.id }} fa-2"></i>
+ <i class="fa fa-{{ page.icon.id }} fa-5 aria-hidden="true""></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 5x</span>
+
+ <span class="hide-sm">
+ <i class="fa fa-{{ page.icon.id }} fa-4 aria-hidden="true""></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 4x</span>
+
+ </span>
+ <i class="fa fa-{{ page.icon.id }} fa-3 aria-hidden="true""></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 3x</span>
+
+ <i class="fa fa-{{ page.icon.id }} fa-2 aria-hidden="true""></i>
+ <span class="sr-only">Example of {{ page.icon.id }} at 2x</span>
+
</span>
- <i class="fa fa-{{ page.icon.id }} fa-1"></i>
+ <i class="fa fa-{{ page.icon.id }} fa-1" aria-hidden="true"></i>
+ <span class="sr-only">Example of {{ page.icon.id }}</span>
</div>
<h1 class="info-class">
fa-{{ page.icon.id }}
<small>
- <i class="fa fa-{{ page.icon.id }}"></i> ·
+ <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> ·
Unicode: <span class="upper">{{ page.icon.unicode }}</span> ·
Created: v{{ page.icon.created }} ·
Categories:
<p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code><i></code> tag:</p>
<div class="well well-transparent">
<div style="font-size: 24px; line-height: 1.5em;">
- <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }}
+ <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i><span class="sr-only">Example of {{ page.icon.id }}</span> fa-{{ page.icon.id }}
</div>
</div>
{% highlight html %}
-<i class="fa fa-{{ page.icon.id }}"></i>
+<i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i>
{% endhighlight %}
- <br>
- <div class="lead"><i class="fa fa-info-circle"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
+ <p class="margin-bottom-lg">
+ <small class="text-muted">Note: to improve <a href="{{ page.relative_path }}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="{{ page.relative_path }}examples/">examples</a>.
+ </div>
</div>
<div class="col-md-3 col-sm-3">
<div class="vertical-ad">{% include ads/fusion.html %}</div>
--- /dev/null
+---
+layout: base
+title: Font Awesome & Accessibility
+navbar_active: accessibility
+relative_path: ../
+---
+{% capture jumbotron_h1 %}<i class="fa fa-wheelchair" aria-hidden="true"></i> Accessibility{% endcapture %}
+{% capture jumbotron_p %}How to make your icons awesome for all of your users{% endcapture %}
+
+{% include jumbotron.html %}
+{% include stripe-social.html %}
+
+<div class="container">
+ {% capture stripe_ad_content %}
+ <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>
+ {% endcapture %}
+ {% include stripe-ad.html %}
+
+ {% include accessibility/background.html %}
+ {% include accessibility/using-with-accessibility.html %}
+ {% include accessibility/other.html %}
+</div>
title: Font Awesome Cheatsheet
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-list-ul"></i> Cheatsheet{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-list-ul" aria-hidden="true"></i> Cheatsheet{% endcapture %}
{% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %}
{% include jumbotron.html %}
{% for icon in sorted_icons %}
<div class="col-md-4 col-sm-6 col-lg-3">
{% if icon.created >= site.fontawesome.major_version %}<small class="text-muted pull-right">{{ icon.created }}</small>{% endif %}
- <i class="fa fa-fw">&#x{{ icon.unicode }}</i>
+ <i class="fa fa-fw" aria-hidden="true"><span class="sr-only">Copy to use {{ icon.class }}</span>&#x{{ icon.unicode }}</i>
fa-{{ icon.class }}
{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}
<span class="text-muted">[&#x{{ icon.unicode }};]</span>
navbar_active: community
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-thumbs-o-up"></i> Community{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Community{% endcapture %}
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
{% include jumbotron.html %}
navbar_active: examples
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-magic"></i> Examples{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-magic" aria-hidden="true"></i> Examples{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
{% include jumbotron.html %}
{% include examples/list.html %}
{% include examples/bordered-pulled.html %}
{% include examples/animated.html %}
+ {% include examples/accessible.html %}
{% include examples/rotated-flipped.html %}
{% include examples/stacked.html %}
{% include examples/bootstrap.html %}
navbar_active: get-started
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-cogs"></i> Get Started{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-cogs" aria-hidden="true"></i> Get Started{% endcapture %}
{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %}
{% include jumbotron.html %}
{% highlight html %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.min.css">
{% endhighlight %}
- <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>
Pat yourself on the back for your scalable-vector-icons-on-the-website
{% highlight scss %}
@fa-font-path: "../font";
{% endhighlight %}
- <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>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="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>
navbar_active: icons
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-flag"></i> The Icons{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-flag" aria-hidden="true"></i> The Icons{% endcapture %}
{% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}
{% include jumbotron.html %}
<div class="row">
<div class="col-md-10 col-sm-9">
<section id="search">
- <label for="search-input"><i class="fa fa-search"></i></label>
+ <label for="search-input"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search icons</span></label>
<input id="search-input" class="form-control input-lg" placeholder="Search icons" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
- <a id="search-clear" href="#" class="fa fa-times-circle hide"></a>
+ <a id="search-clear" href="#" class="fa fa-times-circle hide" aria-hidden="true"><span class="sr-only">Clear search</span></a>
</section>
</div>
<div class="col-md-2 col-sm-3 padding-left-none hidden-xs">
<div class="algolia">
- by <a href="https://algolia.com"><i class="fas fas-algolia"></i></a>
+ by <a href="https://algolia.com"><i class="fas fas-algolia" aria-hidden="true"></i><span class="sr-only">Algolia</span></a>
</div>
</div>
</div>
</div>
<% } else { %>
<div class="alert alert-danger text-lg" role="alert">
- <h3 class="margin-top margin-bottom-lg"><i class="fa fa-meh-o"></i> Oops! No icons matched your query.</h3>
+ <h3 class="margin-top margin-bottom-lg"><i class="fa fa-meh-o" aria-hidden="true"></i> Oops! No icons matched your query.</h3>
A few things that might help:
<ol>
<li>
<script type="text/template" id="result-template">
<div class="fa-hover col-md-3 col-sm-4">
<a href="{{ page.relative_path }}icon/<%= result.name %>">
- <i class="fa <%= result.css_class %>"></i> <%= result._highlightResult.name.value %>
+ <i class="fa <%= result.css_class %>" aria-hidden="true"></i> <%= result._highlightResult.name.value %>
<% if (matches.length > 0) { %>
<span class="text-muted">(<%= matches.join(", ") %>)</span>
<% } %>
navbar_active: license
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-gavel"></i> License{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-gavel" aria-hidden="true"></i> License{% endcapture %}
{% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %}
{% include jumbotron.html %}
<div class="alert alert-success">
<ul class="fa-ul margin-bottom-none">
<li>
- <i class="fa-li fa fa-info-circle fa-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
+ <i class="fa-li fa fa-info-circle fa-lg" aria-hidden="true"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
"Font Awesome by Dave Gandy - http://fontawesome.io".
</li>
</ul>
navbar_active: whats-new
relative_path: ../
---
-{% capture jumbotron_h1 %}<i class="fa fa-lightbulb-o"></i> What's New{% endcapture %}
+{% capture jumbotron_h1 %}<i class="fa fa-lightbulb-o" aria-hidden="true"></i> What's New{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version — Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %}
{% include jumbotron.html %}
projects / thirdparty / Font-Awesome.git / commitdiff
