FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2024-12-29 06:51:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding accessibility information and best practices

Browse Source 
* adding accessibility informational page
* adding in accessibility-minded examples
* adding accessibility practices to icon markup example
* updating doc site icons with accessibility best practices
* updating homepage with accessibility information

Fix #6133
This commit is contained in:
Brian Talbot 2016-04-01 09:45:15 -04:00
parent 72eabbc637
commit 9496b600a8
56 changed files with 615 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/_includes/accessibility/background.html Normal file
View File

@ -0,0 +1,15 @@
<div id="background">
<h2 class="page-header">Icon Fonts &amp; Accessibility</h2>
<p>
Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When trying our default markup for rendering icons, assisistive technology may have the following problems.
</p>
<ul>
<li>
The assistive technology may not find any content to read out to a user
</li>
<li>
The assistive 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>

16
src/_includes/accessibility/other.html Normal file
View File

@ -0,0 +1,16 @@
<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>

130
src/_includes/accessibility/using-with-accessibility.html Normal file
View File

@ -0,0 +1,130 @@
<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>

2
src/_includes/brand-adblock-warning.html
View File

@ -1,4 +1,4 @@
<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 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 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 <a href="https://adblockplus.org/en/bugs" class="alert-link">report an issue with Adblock Plus</a> if you believe this to be

2
src/_includes/community/requesting-new-icons.html
View File

@ -23,7 +23,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>

109
src/_includes/examples/accessible.html Normal file
View File

@ -0,0 +1,109 @@
<section id="accessible">
<h2 class="page-header">
Accessibility-Minded
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
</a>
<a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
<span class="sr-only">Skip to main navigation</span>
</a>
</p>
<p>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>
</p>
<p>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</p>
<p>
<a href="path/to/shopping/cart" class="btn btn-primary">
<i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
<span class="sr-only">View 3 items in your shopping cart</span>
</a>
</p>
<p>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>
</p>
</div>
<div class="col-md-9 col-sm-8">
<p>
With <a href="{{ page.relative_path }}accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
</p>
{% highlight html %}
<a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
</a>
<a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
<span class="sr-only">Skip to main navigation</span>
</a>
{% endhighlight %}
{% highlight html %}
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"</i>
<span class="sr-only">Refreshing...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>
{% endhighlight %}
{% highlight html %}
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
{% endhighlight %}
{% highlight html %}
<a href="path/to/shopping/cart" class="btn btn-primary">
<i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
<span class="sr-only">View 3 items in your shopping cart</span>
</a>
{% endhighlight %}
{% highlight html %}
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>
{% endhighlight %}
</div>
</div>
</section>

32
src/_includes/examples/animated.html
View File

@ -10,10 +10,19 @@
<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">
@ -22,20 +31,29 @@
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>
{% highlight html %} {% highlight html %}
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-spinner fa-pulse"></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 %} {% endhighlight %}
<p class="alert alert-success"> <p class="alert alert-success">
<i class="fa fa-exclamation-triangle fa-lg"></i> <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 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> <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>

9
src/_includes/examples/basic.html
View File

@ -10,7 +10,9 @@
<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">
@ -20,12 +22,13 @@
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>
{% highlight html %} {% 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 %} {% endhighlight %}
<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>

72
src/_includes/examples/bootstrap.html
View File

@ -4,43 +4,52 @@
<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 {{ 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> </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="#">
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> <i class="fa fa-align-left" title="Align Left"></i>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> </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-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-pencil fa-fw" aria-hidden="true"></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-trash-o fa-fw" aria-hidden="true"></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-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>
@ -52,18 +61,26 @@
</p> </p>
{% highlight html %} {% highlight html %}
<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>
<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 {{ 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"> <div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> <a class="btn btn-default" href="#">
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> <i class="fa fa-align-left" title="Align Left"></i>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> </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-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="input-group margin-bottom-sm"> <div class="input-group margin-bottom-sm">
@ -78,13 +95,14 @@
<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"></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-pencil fa-fw" aria-hidden="true"></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-trash-o fa-fw" aria-hidden="true"></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-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>
{% endhighlight %} {% endhighlight %}

6
src/_includes/examples/bordered-pulled.html
View File

@ -1,6 +1,6 @@
<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/{{ 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 }}/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> <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
@ -9,7 +9,7 @@
<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>
@ -20,7 +20,7 @@
article icons. article icons.
</p> </p>
{% highlight html %} {% 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... ...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.

16
src/_includes/examples/fixed-width.html
View File

@ -9,10 +9,10 @@
<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-home fa-fw" aria-hidde="true"></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-book fa-fw" aria-hidde="true"></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-pencil fa-fw" aria-hidde="true"></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-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">
@ -22,10 +22,10 @@
</p> </p>
{% highlight html %} {% highlight html %}
<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-home fa-fw" aria-hidden="true"></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-book fa-fw" aria-hidden="true"></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-pencil fa-fw" aria-hidden="true"></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-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div> </div>

10
src/_includes/examples/larger.html
View File

@ -8,11 +8,11 @@
</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-lg" aria-hidden="true"></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-2x" aria-hidden="true"></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-3x" aria-hidden="true"></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-4x" aria-hidden="true"></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-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>

16
src/_includes/examples/list.html
View File

@ -9,20 +9,20 @@
<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" aria-hidden="true"></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-check-square" aria-hidden="true"></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-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</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>
{% highlight html %} {% highlight html %}
<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" aria-hidden="true"></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-check-square" aria-hidden="true"></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-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li> <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div> </div>

12
src/_includes/examples/rotated-flipped.html
View File

@ -9,12 +9,12 @@
<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" aria-hidden="true"></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-90" aria-hidden="true"></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-180" aria-hidden="true"></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-rotate-270" aria-hidden="true"></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-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical <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">

8
src/_includes/examples/stacked.html
View File

@ -9,22 +9,22 @@
<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>

2
src/_includes/footer.html
View File

@ -18,7 +18,7 @@
</a> </a>
</div> </div>
<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">&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/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</div> </div>

2
src/_includes/icons/brand.html
View File

@ -9,7 +9,7 @@
{% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %} {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
{% for icon in icons_brand %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/chart.html
View File

@ -5,7 +5,7 @@
{% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %} {% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
{% for icon in icons_chart %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/currency.html
View File

@ -5,7 +5,7 @@
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %} {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/directional.html
View File

@ -5,7 +5,7 @@
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %} {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/file-type.html
View File

@ -5,7 +5,7 @@
{% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %} {% assign icons_file_type = icons | expand_aliases | category:"File Type Icons" | sort_by:'class' %}
{% for icon in icons_file_type %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/form-control.html
View File

@ -5,7 +5,7 @@
{% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %} {% assign icons_form_control = icons | expand_aliases | category:"Form Control Icons" | sort_by:'class' %}
{% for icon in icons_form_control %} {% 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 %} {% endfor %}
</div> </div>
</section> </section>

2
src/_includes/icons/gender.html
View File

@ -5,7 +5,7 @@
{% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %} {% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
{% for icon in icons_gender %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/hand.html
View File

@ -5,7 +5,7 @@
{% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %} {% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}
{% for icon in icons_hand %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/medical.html
View File

@ -5,7 +5,7 @@
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %} {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/new.html
View File

@ -11,7 +11,7 @@
{% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %} {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version | sort_by:'class' %}
{% for icon in icons_new %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/payment.html
View File

@ -5,7 +5,7 @@
{% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %} {% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
{% for icon in icons_payment %} {% 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 %} {% endfor %}
</div> </div>

5
src/_includes/icons/spinner.html
View File

@ -4,7 +4,8 @@
<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">Note:</strong>
These icons work great with the <code>fa-spin</code> class. Check out the 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>. <a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
</li> </li>
@ -15,7 +16,7 @@
{% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %} {% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
{% for icon in icons_spinner %} {% 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 %} {% endfor %}
</div> </div>
</section> </section>

2
src/_includes/icons/text-editor.html
View File

@ -5,7 +5,7 @@
{% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %} {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
{% for icon in icons_text_editor %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/transportation.html
View File

@ -5,7 +5,7 @@
{% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %} {% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
{% for icon in icons_transportation %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/video-player.html
View File

@ -5,7 +5,7 @@
{% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %} {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
{% for icon in icons_video_player %} {% 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 %} {% endfor %}
</div> </div>

2
src/_includes/icons/web-application.html
View File

@ -5,7 +5,7 @@
{% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %} {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
{% for icon in icons_web_application %} {% 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 %} {% endfor %}
</div> </div>

36
src/_includes/jumbotron-carousel.html
View File

@ -7,7 +7,7 @@
<div class="actions"> <div class="actions">
<a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal" <a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);"> onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
<i class="fa fa-download fa-lg"></i>&nbsp; <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
Download Download
</a> </a>
</div> </div>
@ -24,27 +24,31 @@
<div id="icon-carousel" class="carousel slide"> <div id="icon-carousel" class="carousel slide">
<!-- Carousel items --> <!-- Carousel items -->
<div class="carousel-inner"> <div class="carousel-inner">
<div class="active item"><div><i class="fa fa-flag"></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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"></i></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> </div>
<!-- Carousel nav --> <!-- Carousel nav -->
<a class="carousel-control left" href="#icon-carousel" data-slide="prev" <a class="carousel-control left" href="#icon-carousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', '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" <a class="carousel-control right" href="#icon-carousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', '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>
</div> </div>

4
src/_includes/modals/download.html
View File

@ -3,9 +3,9 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <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"> <h2 class="modal-title" id="modal-download-label">
<i class="fa fa-download fa-lg"></i>&nbsp; <i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
Download Download
</h2> </h2>
</div> </div>

58
src/_includes/navbar.html
View File

@ -34,10 +34,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="{{ 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>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
@ -49,37 +49,46 @@
<li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}"> <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> <a href="{{ page.relative_path }}whats-new/">New</a>
</li> </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-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 %}"> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<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="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&nbsp; All Icons</a></li> <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li> <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-fort-awesome fa-fw" aria-hidden="true"></i>&nbsp; New Icons in {{ site.fontawesome.minor_version }}</a></li>
<li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw"></i>&nbsp; Web Application Icons</a></li> <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw"></i>&nbsp; Hand Icons</a></li> <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw"></i>&nbsp; Transportation Icons</a></li> <li><a href="{{ page.relative_path }}icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw"></i>&nbsp; Gender Icons</a></li> <li><a href="{{ page.relative_path }}icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw"></i>&nbsp; File Type Icons</a></li> <li><a href="{{ page.relative_path }}icons/#file-type"><i class="fa fa-file-image-o fa-fw" aria-hidden="true"></i>&nbsp; File Type Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw"></i>&nbsp; Spinner Icons</a></li> <li><a href="{{ page.relative_path }}icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw"></i>&nbsp; Form Control Icons</a></li> <li><a href="{{ page.relative_path }}icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw"></i>&nbsp; Payment Icons</a></li> <li><a href="{{ page.relative_path }}icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw"></i>&nbsp; Chart Icons</a></li> <li><a href="{{ page.relative_path }}icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw"></i>&nbsp; Currency Icons</a></li> <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw"></i>&nbsp; Text Editor Icons</a></li> <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw"></i>&nbsp; Directional Icons</a></li> <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw"></i>&nbsp; Video Player Icons</a></li> <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw"></i>&nbsp; Brand Icons</a></li> <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
<li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw"></i>&nbsp; Medical Icons</a></li> <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
</ul> </ul>
</li> </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-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 %}"> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<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="{{ page.relative_path }}examples/">Examples</a></li> <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
@ -90,18 +99,17 @@
<li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li> <li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li> <li><a href="{{ page.relative_path }}examples/#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/#animated">Animated Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#accessible">Accessibility-Minded</a></li>
<li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li> <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
<li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li> <li><a href="{{ page.relative_path }}examples/#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/#bootstrap">Bootstrap 3 Examples</a></li>
<li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li> <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
</ul> </ul>
</li> </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 == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li>
<li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li> <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>

12
src/_includes/new-features.html
View File

@ -2,27 +2,27 @@
<section id="whats-new" class="feature-list"> <section id="whats-new" class="feature-list">
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <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. Everything re-written from the ground up for speed and simplicity.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. New icon base class allows simpler CSS, faster rendering, and easier control.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Icons have been renamed to improve consistency and predictability.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Font Awesome is now more compatible with all web frameworks, including Foundation.
</div> </div>
<div class="col-md-4 col-sm-6"> <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>. Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
</div> </div>
</div> </div>

50
src/_includes/new-naming.html
View File

@ -12,15 +12,15 @@
<p class="margin-bottom-sm">Solid icons as the base variant</p> <p class="margin-bottom-sm">Solid icons as the base variant</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <li>
<i class="fa fa-bookmark fa-li"></i> <i class="fa fa-bookmark fa-li" aria-hidden="true"></i>
fa-bookmark fa-bookmark
</li> </li>
<li> <li>
<i class="fa fa-comment fa-li"></i> <i class="fa fa-comment fa-li" aria-hidden="true"></i>
fa-comment fa-comment
</li> </li>
<li> <li>
<i class="fa fa-folder fa-li"></i> <i class="fa fa-folder fa-li" aria-hidden="true"></i>
fa-folder fa-folder
</li> </li>
</ul> </ul>
@ -30,15 +30,15 @@
<p class="margin-bottom-sm">Outlined version of previous modifier</p> <p class="margin-bottom-sm">Outlined version of previous modifier</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-bookmark-o
</li> </li>
<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 fa-comment-o
</li> </li>
<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 fa-folder-o
</li> </li>
</ul> </ul>
@ -48,15 +48,15 @@
<p class="margin-bottom-sm">Circle under previous modifier</p> <p class="margin-bottom-sm">Circle under previous modifier</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-check-circle
</li> </li>
<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 fa-exclamation-circle
</li> </li>
<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 fa-plus-circle
</li> </li>
</ul> </ul>
@ -66,15 +66,15 @@
<p class="margin-bottom-sm">Square under previous modifier</p> <p class="margin-bottom-sm">Square under previous modifier</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-check-square
</li> </li>
<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 fa-twitter-square
</li> </li>
<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 fa-plus-square
</li> </li>
</ul> </ul>
@ -84,15 +84,15 @@
<p class="margin-bottom-sm">Directional modifier always at the end</p> <p class="margin-bottom-sm">Directional modifier always at the end</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-arrow-right
</li> </li>
<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 fa-arrow-circle-right
</li> </li>
<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 fa-angle-double-right
</li> </li>
</ul> </ul>
@ -102,15 +102,15 @@
<p class="margin-bottom-sm">Alternative to the original</p> <p class="margin-bottom-sm">Alternative to the original</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-unlock-alt
</li> </li>
<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 fa-list-alt
</li> </li>
<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 fa-github-alt
</li> </li>
</ul> </ul>
@ -120,33 +120,33 @@
<p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p> <p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-arrows-v
</li> </li>
<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 fa-arrows-h
</li> </li>
<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 fa-ellipsis-v
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6"> <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> <p class="margin-bottom-sm">Consistent when strung together</p>
<ul class="fa-ul padding-left-sm"> <ul class="fa-ul padding-left-sm">
<li> <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 fa-arrow-circle-o-right
</li> </li>
<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 fa-caret-square-o-right
</li> </li>
<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 fa-hand-o-right
</li> </li>
</ul> </ul>

2
src/_includes/stripe-social.html
View File

@ -11,7 +11,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>

2
src/_includes/tell-me-thanks.html
View File

@ -6,7 +6,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>

12
src/_includes/tests/rotated-flipped-inside-anchor.html
View File

@ -1,6 +1,6 @@
<a href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br> <a href="#"><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br> <a href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br> <a href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180</a><br>
<a href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br> <a href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270</a><br>
<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br> <a href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal</a><br>
<a href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a> <a href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical</a>

12
src/_includes/tests/rotated-flipped-inside-btn.html
View File

@ -1,6 +1,6 @@
<a class="btn btn-default" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal</a><br>
<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a> <a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical</a>

12
src/_includes/tests/rotated-flipped.html
View File

@ -1,6 +1,6 @@
<i class="fa fa-flag"></i>&nbsp; normal<br> <i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal<br>
<i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90<br> <i class="fa fa-flag fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180<br> <i class="fa fa-flag fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270<br> <i class="fa fa-flag fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br> <i class="fa fa-flag fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical <i class="fa fa-flag fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical

18
src/_includes/tests/stacked-inside-anchor.html
View File

@ -1,20 +1,20 @@
<p> <p>
<a href="#"> <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-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <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-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i> <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <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-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span> </span>
@ -23,21 +23,21 @@
</p> </p>
<p> <p>
<a href="#"> <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-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span> </span>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <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-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i> <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <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-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span> </span>
@ -46,21 +46,21 @@
</p> </p>
<p> <p>
<a href="#"> <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-circle-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>
Twitter Icon Twitter Icon
</a> </a>
<a href="#"> <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-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i> <i class="fa fa-facebook-f fa-stack-1x"></i>
</span> </span>
Facebook Icon Facebook Icon
</a> </a>
<a href="#"> <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-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i> <i class="fa fa-github fa-stack-1x"></i>
</span> </span>

2
src/_includes/tests/stacked-with-text.html
View File

@ -1,4 +1,4 @@
<span class="fa-stack"> <span class="fa-stack" aria-hidden="true">
<i class="fa fa-calendar-o fa-stack-2x"></i> <i class="fa fa-calendar-o fa-stack-2x"></i>
<span class="fa-stack-1x padding-top-sm">27</span> <span class="fa-stack-1x padding-top-sm">27</span>
</span> </span>

20
src/_includes/tests/stacked.html
View File

@ -1,56 +1,56 @@
<span style="border: solid 1px #d3d3d3; display: inline-block; text-align: center"> <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-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span><br>Center </span><br>Center
</span> </span>
<hr> <hr>
<p> <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-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span> </span>
Twitter Icon 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-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i> <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span> </span>
Facebook Icon 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-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>
<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-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span> </span>
Twitter Icon 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-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i> <i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span> </span>
Facebook Icon 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-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span> </span>
GitHub Icon GitHub Icon
</p> </p>
<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-circle-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>
Twitter Icon 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-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i> <i class="fa fa-facebook-f fa-stack-1x"></i>
</span> </span>
Facebook Icon 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-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i> <i class="fa fa-github fa-stack-1x"></i>
</span> </span>

2
src/_includes/thanks-to.html
View File

@ -17,7 +17,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="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome. <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p> </p>

21
src/_includes/why.html
View File

@ -1,41 +1,42 @@
<section id="why" class="feature-list"> <section id="why" class="feature-list">
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <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. In a single collection, Font Awesome is a pictographic language of web-related actions.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Scalable vector graphics means every icon looks awesome at any size.
</div> </div>
<div class="col-md-4 col-sm-6"> <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>. Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Easily style icon color, size, shadow, and anything that's possible with CSS.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div> </div>
<div class="col-md-4 col-sm-6"> <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. Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
</div> </div>
<div class="col-md-4 col-sm-6"> <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, To use on the desktop or for a complete set of vectors,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>. check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div> </div>
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa fa-search"></i> Screen Reader Compatible</h4> <h4><i class="fa fa-wheelchair" aria-hidden="true"></i> Accessibility-minded</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts. Font Awesome <i class="fa fa-heart" aria-hidden="true"></i><span class="sr-only">loves</span> screen readers and
<a href="{{ page.relative_path }}accessibility/">helps make your icons accessible</a> on the web.
</div> </div>
</div> </div>
</section> </section>

39
src/_layouts/icon.html
View File

@ -6,19 +6,31 @@ relative_path: ../../
<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-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp; <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>&nbsp;&nbsp;
<span class="hide-xs"> <span class="hide-xs">
<i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp; <i class="fa fa-{{ page.icon.id }} fa-5 aria-hidden="true""></i>
<span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span> <span class="sr-only">Example of {{ page.icon.id }} at 5x</span>
<i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp; &nbsp;&nbsp;
<i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp; <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>
&nbsp;&nbsp;
</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>
&nbsp;&nbsp;
<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>
&nbsp;
</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> </div>
<h1 class="info-class"> <h1 class="info-class">
fa-{{ page.icon.id }} fa-{{ page.icon.id }}
<small> <small>
<i class="fa fa-{{ page.icon.id }}"></i> &middot; <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i> &middot;
Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot; Unicode: <span class="upper">{{ page.icon.unicode }}</span> &middot;
Created: v{{ page.icon.created }} &middot; Created: v{{ page.icon.created }} &middot;
Categories: Categories:
@ -45,14 +57,19 @@ relative_path: ../../
<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>&lt;i&gt;</code> tag:</p> <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>&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-{{ 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>
</div> </div>
{% highlight html %} {% highlight html %}
<i class="fa fa-{{ page.icon.id }}"></i> <i class="fa fa-{{ page.icon.id }}" aria-hidden="true"></i>
{% endhighlight %} {% endhighlight %}
<br> <p class="margin-bottom-lg">
<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> <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>
<div class="col-md-3 col-sm-3"> <div class="col-md-3 col-sm-3">
<div class="vertical-ad">{% include ads/fusion.html %}</div> <div class="vertical-ad">{% include ads/fusion.html %}</div>

28
src/accessibility.html Normal file
View File

@ -0,0 +1,28 @@
---
layout: base
title: Font Awesome & Accessibility
navbar_active: accessibility
relative_path: ../
---
{% capture jumbotron_h1 %}<i class="fa fa-wheelchair" aria-hidden="true"></i>&nbsp; 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>

4
src/cheatsheet.html
View File

@ -3,7 +3,7 @@ layout: base
title: Font Awesome Cheatsheet title: Font Awesome Cheatsheet
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-list-ul"></i>&nbsp; Cheatsheet{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-list-ul" aria-hidden="true"></i>&nbsp; Cheatsheet{% endcapture %}
{% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %} {% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -25,7 +25,7 @@ relative_path: ../
{% for icon in sorted_icons %} {% for icon in sorted_icons %}
<div class="col-md-4 col-sm-6 col-lg-3"> <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 %} {% 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 }} fa-{{ icon.class }}
{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %} {% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}
<span class="text-muted">[&amp;#x{{ icon.unicode }};]</span> <span class="text-muted">[&amp;#x{{ icon.unicode }};]</span>

2
src/community.html
View File

@ -4,7 +4,7 @@ title: The Font Awesome Community
navbar_active: community navbar_active: community
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-thumbs-o-up"></i>&nbsp; Community{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp; Community{% endcapture %}
{% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}

3
src/examples.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Examples
navbar_active: examples navbar_active: examples
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-magic"></i>&nbsp; Examples{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-magic" aria-hidden="true"></i>&nbsp; Examples{% endcapture %}
{% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -26,6 +26,7 @@ relative_path: ../
{% include examples/list.html %} {% include examples/list.html %}
{% include examples/bordered-pulled.html %} {% include examples/bordered-pulled.html %}
{% include examples/animated.html %} {% include examples/animated.html %}
{% include examples/accessible.html %}
{% include examples/rotated-flipped.html %} {% include examples/rotated-flipped.html %}
{% include examples/stacked.html %} {% include examples/stacked.html %}
{% include examples/bootstrap.html %} {% include examples/bootstrap.html %}

6
src/get-started.html
View File

@ -4,7 +4,7 @@ title: Get Started with Font Awesome
navbar_active: get-started navbar_active: get-started
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-cogs"></i>&nbsp; Get Started{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-cogs" aria-hidden="true"></i>&nbsp; Get Started{% endcapture %}
{% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %} {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -29,7 +29,7 @@ relative_path: ../
{% highlight html %} {% highlight html %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.min.css">
{% endhighlight %} {% 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>
<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
@ -135,7 +135,7 @@ $ gem install font-awesome-sass
{% highlight scss %} {% highlight scss %}
@fa-font-path: "../font"; @fa-font-path: "../font";
{% endhighlight %} {% 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>
<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="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li> <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li>

12
src/icons.html
View File

@ -4,7 +4,7 @@ title: Font Awesome Icons
navbar_active: icons navbar_active: icons
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-flag"></i>&nbsp; The Icons{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-flag" aria-hidden="true"></i>&nbsp; The Icons{% endcapture %}
{% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -24,14 +24,14 @@ relative_path: ../
<div class="row"> <div class="row">
<div class="col-md-10 col-sm-9"> <div class="col-md-10 col-sm-9">
<section id="search"> <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"> <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> </section>
</div> </div>
<div class="col-md-2 col-sm-3 padding-left-none hidden-xs"> <div class="col-md-2 col-sm-3 padding-left-none hidden-xs">
<div class="algolia"> <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>
</div> </div>
@ -63,7 +63,7 @@ relative_path: ../
</div> </div>
<% } else { %> <% } else { %>
<div class="alert alert-danger text-lg" role="alert"> <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: A few things that might help:
<ol> <ol>
<li> <li>
@ -87,7 +87,7 @@ relative_path: ../
<script type="text/template" id="result-template"> <script type="text/template" id="result-template">
<div class="fa-hover col-md-3 col-sm-4"> <div class="fa-hover col-md-3 col-sm-4">
<a href="{{ page.relative_path }}icon/<%= result.name %>"> <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) { %> <% if (matches.length > 0) { %>
<span class="text-muted">(<%= matches.join(", ") %>)</span> <span class="text-muted">(<%= matches.join(", ") %>)</span>
<% } %> <% } %>

4
src/license.html
View File

@ -4,7 +4,7 @@ title: Font Awesome License
navbar_active: license navbar_active: license
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-gavel"></i>&nbsp; License{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-gavel" aria-hidden="true"></i>&nbsp; License{% endcapture %}
{% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %} {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}
@ -23,7 +23,7 @@ relative_path: ../
<div class="alert alert-success"> <div class="alert alert-success">
<ul class="fa-ul margin-bottom-none"> <ul class="fa-ul margin-bottom-none">
<li> <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". "Font Awesome by Dave Gandy - http://fontawesome.io".
</li> </li>
</ul> </ul>

2
src/whats-new.html
View File

@ -4,7 +4,7 @@ title: What's New
navbar_active: whats-new navbar_active: whats-new
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa fa-lightbulb-o"></i>&nbsp; What's New{% endcapture %} {% capture jumbotron_h1 %}<i class="fa fa-lightbulb-o" aria-hidden="true"></i>&nbsp; What's New{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %} {% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}