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

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

@ -23,7 +23,7 @@
</ul>
</li>
<li>
Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face. <i class="fa fa-smile-o"></i>
Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face. <i class="fa fa-smile-o" aria-hidden="true"></i>
</li>
</ol>
</section>

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

@ -6,21 +6,27 @@
<div class="col-md-3 col-sm-4">
<p>
<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 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 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>
</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-cog fa-spin fa-3x fa-fw" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></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>
@ -42,7 +48,8 @@
</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>
</div>
<div class="col-md-9 col-sm-8">
@ -52,21 +59,27 @@
{% highlight html %}
<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 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 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>
{% endhighlight %}
{% highlight html %}
<i class="fa fa-refresh fa-spin" aria-hidden="true"><span class="sr-only">Reloading&hellip;</span></i>
<i class="fa fa-cog fa-spin" aria-hidden="true"><span class="sr-only">Saving. Hang tight!</span></i>
<i class="fa fa-refresh fa-spin" aria-hidden="true"></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 %}
{% highlight html %}

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

@ -9,11 +9,11 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-spinner 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>
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
<i class="fa fa-spinner fa-pulse 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" aria-hidden="true"></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" aria-hidden="true"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom" aria-hidden="true"></i>
</p>
</div>
<div class="col-md-9 col-sm-8">
@ -29,13 +29,13 @@
<i class="fa fa-spinner fa-pulse"></i>
{% endhighlight %}
<p class="alert alert-success">
<i class="fa fa-exclamation-triangle fa-lg"></i>
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
<a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a>
<i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong>
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
<a href="https://github.com/FortAwesome/Font-Awesome/issues/671" class="alert-link" target="_blank">issue #671</a>
for examples and possible workarounds.
</p>
<p class="alert alert-success">
<i class="fa fa-info-circle fa-lg"></i> CSS3 animations aren't supported in IE8 - IE9.
<i class="fa fa-info-circle fa-lg" aria-hidden="true"></i><strong class="sr-only">Note:</strong> CSS3 animations aren't supported in IE8 - IE9.
</p>
</div>
</div>

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

@ -10,7 +10,8 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-camera-retro"></i> fa-camera-retro
<i class="fa fa-camera-retro" aria-hidden="true">fa-camera-retro</i>
<span class="sr-only">Example: basic icon</span>
</p>
</div>
<div class="col-md-9 col-sm-8">
@ -25,7 +26,8 @@
<div class="alert alert-success">
<ul class="fa-ul">
<li>
<i class="fa fa-info-circle fa-lg fa-li"></i>
<i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
<strong class="sr-only">Example: basic icon</strong>
If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,
drop shadow, and anything else that gets inherited using CSS.
</li>

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

@ -4,43 +4,57 @@
<div class="col-md-3 col-sm-4">
<p>
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
</p>
<p>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p>
<div class="margin-bottom">
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-left" aria-hidden="true"></i>
<span class="sr-only">Align Left</span>
</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="margin-bottom">
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</div>
<div class="margin-bottom">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw" aria-hidden="true"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<span class="fa fa-caret-down" aria-hidden="true"></span>
<span class="sr-only">Toggle dropdown menu</span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
<li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
</ul>
</div>
</div>
@ -52,18 +66,30 @@
</p>
{% highlight html %}
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<i class="fa fa-cog" aria-hidden="true"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<i class="fa fa-flag fa-2x pull-left" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-left" aria-hidden="true"></i>
<span class="sr-only">Align Left</span>
</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 class="input-group margin-bottom-sm">
@ -78,13 +104,15 @@
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<span class="fa fa-caret-down"></span>
<span class="sr-only">Toggle dropdown menu</span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw" aria-hidden="true"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
<li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li>
</ul>
</div>
{% endhighlight %}

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

@ -9,7 +9,7 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<p>
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
&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.
</p>

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

@ -9,10 +9,10 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidde="true"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidde="true"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidde="true"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidde="true"></i>&nbsp; Settings</a>
</div>
</div>
<div class="col-md-9 col-sm-8">

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

@ -8,11 +8,11 @@
</h2>
<div class="row">
<div class="col-md-3 col-sm-4">
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-2x</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-3x</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-4x</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-5x</p>
<p><i class="fa fa-camera-retro fa-lg" aria-hidden="true"></i> fa-lg</p>
<p><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i> fa-2x</p>
<p><i class="fa fa-camera-retro fa-3x" aria-hidden="true"></i> fa-3x</p>
<p><i class="fa fa-camera-retro fa-4x" aria-hidden="true"></i> fa-4x</p>
<p><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i> fa-5x</p>
</div>
<div class="col-md-9 col-sm-8">
<p>

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

@ -9,20 +9,20 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
<li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
</ul>
</div>
<div class="col-md-9 col-sm-8">
<p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>
{% highlight html %}
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
<li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
<li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
</ul>
{% endhighlight %}
</div>

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

@ -9,12 +9,12 @@
<div class="row">
<div class="col-md-3 col-sm-4">
<p style="font-size: 18px;">
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
<i class="fa fa-shield" aria-hidden="true"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90" aria-hidden="true"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180" aria-hidden="true"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270" aria-hidden="true"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical" aria-hidden="true"></i>&nbsp; fa-flip-vertical
</p>
</div>
<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="col-md-3 col-sm-4">
<div class="margin-bottom">
<span class="fa-stack fa-lg">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

2
src/_includes/footer.html
View File

@ -18,7 +18,7 @@
</a>
</div>
<div>
<i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }}
<i class="fa fa-flag" aria-hidden="true"></i> Font Awesome {{ site.fontawesome.version }}
<span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Created by <a href="https://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
</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' %}
{% for icon in icons_brand %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_chart = icons | expand_aliases | category:"Chart Icons" | sort_by:'class' %}
{% for icon in icons_chart %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
{% for icon in icons_currency %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
{% for icon in icons_directional %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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' %}
{% for icon in icons_file_type %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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' %}
{% for icon in icons_form_control %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

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

@ -5,7 +5,7 @@
{% assign icons_gender = icons | expand_aliases | category:"Gender Icons" | sort_by:'class' %}
{% for icon in icons_gender %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_hand = icons | expand_aliases | category:"Hand Icons" | sort_by:'class' %}
{% for icon in icons_hand %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
{% for icon in icons_medical %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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' %}
{% for icon in icons_new %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_payment = icons | expand_aliases | category:"Payment Icons" | sort_by:'class' %}
{% for icon in icons_payment %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -4,7 +4,8 @@
<div class="alert alert-success">
<ul class="fa-ul">
<li>
<i class="fa fa-info-circle fa-lg fa-li"></i>
<i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
<strong class="sr-only">Note:</strong>
These icons work great with the <code>fa-spin</code> class. Check out the
<a href="{{ page.relative_path }}examples/#animated" class="alert-link">spinning icons example</a>.
</li>
@ -15,7 +16,7 @@
{% assign icons_spinner = icons | expand_aliases | category:"Spinner Icons" | sort_by:'class' %}
{% for icon in icons_spinner %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>
</section>

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' %}
{% for icon in icons_text_editor %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -5,7 +5,7 @@
{% assign icons_transportation = icons | expand_aliases | category:"Transportation Icons" | sort_by:'class' %}
{% for icon in icons_transportation %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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' %}
{% for icon in icons_video_player %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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' %}
{% for icon in icons_web_application %}
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}" aria-hidden="true"></i> <span class="sr-only">Example of </span>{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div>
{% endfor %}
</div>

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

@ -7,7 +7,7 @@
<div class="actions">
<a class="btn btn-default btn-lg" href="#modal-download" data-toggle="modal"
onClick="_gaq.push(['_trackEvent', 'Launch Modal', 'Launch Download Modal']);">
<i class="fa fa-download fa-lg"></i>&nbsp;
<i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
Download
</a>
</div>
@ -24,27 +24,31 @@
<div id="icon-carousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><div><i class="fa fa-flag"></i></div></div>
<div class="item"><div><i class="fa fa-fort-awesome"></i></div></div>
<div class="item"><div><i class="fa fa-sticky-note"></i></div></div>
<div class="item"><div><i class="fa fa-commenting"></i></div></div>
<div class="item"><div><i class="fa fa-map-signs"></i></div></div>
<div class="item"><div><i class="fa fa-envelope"></i></div></div>
<div class="item"><div><i class="fa fa-send-o"></i></div></div>
<div class="item"><div><i class="fa fa-book"></i></div></div>
<div class="item"><div><i class="fa fa-fighter-jet"></i></div></div>
<div class="item"><div><i class="fa fa-beer"></i></div></div>
<div class="item"><div><i class="fa fa-heart-o"></i></div></div>
<div class="item"><div><i class="fa fa-thumbs-o-up"></i></div></div>
<div class="item"><div><i class="fa fa-pied-piper-alt"></i></div></div>
<div class="active item"><div><i class="fa fa-flag" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div>
<div class="item"><div><i class="fa fa-fort-awesome" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div>
<div class="item"><div><i class="fa fa-sticky-note" aria-hidden="true"></i><span class="sr-only">sticky note icon</span></div></div>
<div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div>
<div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div>
<div class="item"><div><i class="fa fa-envelope" aria-hidden="true"></i><span class="sr-only">envelope icon</span></div></div>
<div class="item"><div><i class="fa fa-send-o" aria-hidden="true"></i><span class="sr-only">send icon</span></div></div>
<div class="item"><div><i class="fa fa-book" aria-hidden="true"></i><span class="sr-only">book icon</span></div></div>
<div class="item"><div><i class="fa fa-fighter-jet" aria-hidden="true"></i><span class="sr-only">fighter jet icon</span></div></div>
<div class="item"><div><i class="fa fa-beer" aria-hidden="true"></i><span class="sr-only">beer icon</span></div></div>
<div class="item"><div><i class="fa fa-heart-o" aria-hidden="true"></i><span class="sr-only">heart icon</span></div></div>
<div class="item"><div><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><span class="sr-only">thumbs up icon</span></div></div>
<div class="item"><div><i class="fa fa-pied-piper-alt" aria-hidden="true"></i><span class="sr-only">pied piper icon</span></div></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#icon-carousel" data-slide="prev"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);">
<i class="fa fa-arrow-circle-left"></i></a>
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control right" href="#icon-carousel" data-slide="next"
onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);">
<i class="fa fa-arrow-circle-right"></i></a>
<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

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

@ -3,9 +3,9 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button>
<h2 class="modal-title" id="modal-download-label">
<i class="fa fa-download fa-lg"></i>&nbsp;
<i class="fa fa-download fa-lg" aria-hidden="true"></i>&nbsp;
Download
</h2>
</div>

44
src/_includes/navbar.html
View File

@ -34,10 +34,10 @@
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-lg"></i>
</button>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg"></i> Font Awesome</a>
<a class="navbar-brand" href="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
</div>
<div class="navbar-collapse collapse">
@ -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 dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
<span class="toggle drop down"></span>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw"></i>&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><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/#web-application"><i class="fa fa-camera-retro fa-fw"></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/#transportation"><i class="fa fa-ship fa-fw"></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/#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/#spinner"><i class="fa fa-spinner fa-fw"></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/#payment"><i class="fa fa-credit-card fa-fw"></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/#currency"><i class="fa fa-won fa-fw"></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/#directional"><i class="fa fa-arrow-right fa-fw"></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/#brand"><i class="fa fa-github fa-fw"></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/#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" 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" aria-hidden="true"></i>&nbsp; Hand 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" 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" 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" 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" 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" 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" aria-hidden="true"></i>&nbsp; Chart 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" 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" 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" 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" aria-hidden="true"></i>&nbsp; Brand 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>
</li>
<li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
<span class="toggle drop down"></span>
</a>
<ul class="dropdown-menu pull-right">
<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">
<div class="row">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-file-text-o"></i> Completely Rewritten</h4>
<h4><i class="fa fa-file-text-o" aria-hidden="true"></i> Completely Rewritten</h4>
Everything re-written from the ground up for speed and simplicity.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4>
<h4><i class="fa fa-fighter-jet" aria-hidden="true"></i> CSS Best Practices</h4>
New icon base class allows simpler CSS, faster rendering, and easier control.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-terminal"></i> New Icon Names</h4>
<h4><i class="fa fa-terminal" aria-hidden="true"></i> New Icon Names</h4>
Icons have been renamed to improve consistency and predictability.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-thumbs-o-up"></i> Bootstrap 3</h4>
<h4><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Bootstrap 3</h4>
Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-code"></i> Better Compatibility</h4>
<h4><i class="fa fa-code" aria-hidden="true"></i> Better Compatibility</h4>
Font Awesome is now more compatible with all web frameworks, including Foundation.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
<h4><i class="fa fa-rub" aria-hidden="true"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
</div>
</div>

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

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

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

@ -11,7 +11,7 @@
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope"></i>
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
</button>
</div>
</div>

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

@ -6,7 +6,7 @@
</p>
<div class="row">
<div class="col-md-6 col-sm-6">
<h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm"></i>Tip me on Gittip</a></h3>
<h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip padding-right-sm" aria-hidden="true"></i>Tip me on Gittip</a></h3>
<p>
Gittip is a great way to let developers know you appreciate their work.
</p>

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 fa-rotate-90"></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-270"></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-vertical"></i>&nbsp; fa-flip-vertical</a>
<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" aria-hidden="true"></i>&nbsp; fa-rotate-90</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" aria-hidden="true"></i>&nbsp; fa-rotate-270</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" 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 fa-rotate-90"></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-270"></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-vertical"></i>&nbsp; fa-flip-vertical</a>
<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" aria-hidden="true"></i>&nbsp; fa-rotate-90</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" aria-hidden="true"></i>&nbsp; fa-rotate-270</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" 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 fa-rotate-90"></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-270"></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-vertical"></i>&nbsp; fa-flip-vertical
<i class="fa fa-flag" aria-hidden="true"></i>&nbsp; normal<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" aria-hidden="true"></i>&nbsp; fa-rotate-180<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" aria-hidden="true"></i>&nbsp; fa-flip-horizontal<br>
<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>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
@ -23,21 +23,21 @@
</p>
<p>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
@ -46,24 +46,24 @@
</p>
<p>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
</a>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
</a>
<a href="#">
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
GitHub Icon
</a>
</p>
</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>
<span class="fa-stack-1x padding-top-sm">27</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 class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span><br>Center
</span>
<hr>
<p>
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Twitter Icon
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
Facebook Icon
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
GitHub Icon
</p>
<p>
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter Icon
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-facebook-f fa-stack-1x"></i>
</span>
Facebook Icon
<span class="fa-stack">
<span class="fa-stack" aria-hidden="true">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>

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

@ -17,7 +17,7 @@
</div>
<div class="col-md-4 col-sm-4">
<p>
Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn">&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="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome.
</p>

18
src/_includes/why.html
View File

@ -1,40 +1,40 @@
<section id="why" class="feature-list">
<div class="row">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
<h4><i class="fa fa-flag" aria-hidden="true"></i> One Font, {{ icons | size }} Icons</h4>
In a single collection, Font Awesome is a pictographic language of web-related actions.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-ban"></i> No JavaScript Required</h4>
<h4><i class="fa fa-ban" aria-hidden="true"></i> No JavaScript Required</h4>
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-arrows-alt"></i> Infinite Scalability</h4>
<h4><i class="fa fa-arrows-alt" aria-hidden="true"></i> Infinite Scalability</h4>
Scalable vector graphics means every icon looks awesome at any size.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
<h4><i class="fa fa-microphone" aria-hidden="true"></i> Free, as in Speech</h4>
Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-pencil"></i> CSS Control</h4>
<h4><i class="fa fa-pencil" aria-hidden="true"></i> CSS Control</h4>
Easily style icon color, size, shadow, and anything that's possible with CSS.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4>
<h4><i class="fa fa-eye" aria-hidden="true"></i> Perfect on Retina Displays</h4>
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
<h4><i class="fa fa-gamepad" aria-hidden="true"></i> Plays Well with Others</h4>
Originally designed for <a href="{{ site.bootstrap.url }}">Bootstrap</a>, Font Awesome works great with all frameworks.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
<h4><i class="fa fa-desktop" aria-hidden="true"></i> Desktop Friendly</h4>
To use on the desktop or for a complete set of vectors,
check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
<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.
</div>
</div>