FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-26 21:41:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP - updating site icons with accessibility best practices

Browse Source
This commit is contained in:
Brian Talbot 2016-04-01 20:28:42 -04:00
parent bee2ab4f8c
commit 9675ee9a63
44 changed files with 268 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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" aria-hidden="true"></i>
</li> </li>
</ol> </ol>
</section> </section>

35
src/_includes/examples/accessible.html
View File

@ -6,21 +6,27 @@
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
<a class="btn btn-default" href="path/to/settings"> <a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" aria-hidden="true"><span class="sr-only">Settings</span></i> <i class="fa fa-cog" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
</a> </a>
<a class="btn btn-danger" href="path/to/settings"> <a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" aria-hidden="true"><span class="sr-only">Delete</span></i> <i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
</a> </a>
<a class="btn btn-primary" href="#navigation-main"> <a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true"><span class="sr-only">Skip to main navigation</span></i> <i class="fa fa-bars" aria-hidden="true"></i>
<span class="sr-only">Skip to main navigation</span>
</a> </a>
</p> </p>
<p> <p>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i> <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i> <span class="sr-only">Reloading&hellip;</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>
<p> <p>
@ -42,7 +48,8 @@
</p> </p>
<p> <p>
<i class="fa fa-battery-half" aria-hidden="true"></i><span class="sr-only">Battery Remaining: 50%;</span> <i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery Remaining: 50%;</span>
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
@ -52,21 +59,27 @@
{% highlight html %} {% highlight html %}
<a class="btn btn-default" href="path/to/settings"> <a class="btn btn-default" href="path/to/settings">
<i class="fa fa-cog" aria-hidden="true"><span class="sr-only">Settings</span></i> <i class="fa fa-cog" aria-hidden="true"></i>
<span class="sr-only">Settings</span>
</a> </a>
<a class="btn btn-danger" href="path/to/settings"> <a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" aria-hidden="true"><span class="sr-only">Delete</span></i> <i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
</a> </a>
<a class="btn btn-primary" href="#navigation-main"> <a class="btn btn-primary" href="#navigation-main">
<i class="fa fa-bars" aria-hidden="true"><span class="sr-only">Skip to main navigation</span></i> <i class="fa fa-bars" aria-hidden="true"></i>
<span class="sr-only">Skip to main navigation</span>
</a> </a>
{% endhighlight %} {% endhighlight %}
{% highlight html %} {% highlight html %}
<i class="fa fa-refresh fa-spin" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i> <i class="fa fa-refresh fa-spin" aria-hidden="true"></i>
<i class="fa fa-cog fa-spin" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i> <span class="sr-only">Reloading&hellip;</span>
<i class="fa fa-cog fa-spin" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>
{% endhighlight %} {% endhighlight %}
{% highlight html %} {% highlight html %}

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

@ -9,11 +9,11 @@
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
<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" aria-hidden="true"></i>
<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" aria-hidden="true"></i>
<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" aria-hidden="true"></i>
<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" aria-hidden="true"></i>
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
@ -29,13 +29,13 @@
<i class="fa fa-spinner fa-pulse"></i> <i class="fa fa-spinner fa-pulse"></i>
{% 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>

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

@ -10,7 +10,8 @@
<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">fa-camera-retro</i>
<span class="sr-only">Example: basic icon</span>
</p> </p>
</div> </div>
<div class="col-md-9 col-sm-8"> <div class="col-md-9 col-sm-8">
@ -25,7 +26,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">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>

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

@ -4,43 +4,57 @@
<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" aria-hidden="true"></i>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> <span class="sr-only">Align Left</span>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> </a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-center" aria-hidden="true"></i>
<span class="sr-only">Align Center</span>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-right" aria-hidden="true"></i>
<span class="sr-only">Align Right</span>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-justify" aria-hidden="true"></i>
<span class="sr-only">Align Justify</span>
</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" aria-hidden="true"></span>
<span class="sr-only">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 +66,30 @@
</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" aria-hidden="true"></i>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> <span class="sr-only">Align Left</span>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> </a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-center" aria-hidden="true"></i>
<span class="sr-only">Align Center</span>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-right" aria-hidden="true"></i>
<span class="sr-only">Align Right</span>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-justify" aria-hidden="true"></i>
<span class="sr-only">Align Justify</span>
</a>
</div> </div>
<div class="input-group margin-bottom-sm"> <div class="input-group margin-bottom-sm">
@ -78,13 +104,15 @@
<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"></span>
<span class="sr-only">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 %}

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

@ -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>

8
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">

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>

44
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"></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">
@ -53,33 +53,35 @@
<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"></i>
<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"></i>
<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>

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

20
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,24 +46,24 @@
</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>
GitHub Icon GitHub Icon
</a> </a>
</p> </p>

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>

18
src/_includes/why.html
View File

@ -1,40 +1,40 @@
<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-search" aria-hidden="true"></i> Screen Reader Compatible</h4>
Font Awesome won't trip up screen readers, unlike other icon fonts. Font Awesome won't trip up screen readers, unlike other icon fonts.
</div> </div>
</div> </div>