FlandreScarle7/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-12-27 14:01:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

changing examples to be CDN auto-a11y based with note

Browse Source
This commit is contained in:
Brian Talbot 2016-05-13 09:44:41 -04:00
parent 94c59bbc1b
commit c763ff1968
5 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,19 +31,19 @@
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>. with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
</p> </p>
{% highlight html %} {% highlight html %}
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
{% endhighlight %} {% endhighlight %}
<p class="alert alert-success"> <p class="alert alert-success">

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

@ -10,7 +10,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-camera-retro" aria-hidden="true"></i> <i class="fa fa-camera-retro"></i>
<span class="sr-only">Example: basic icon</span> <span class="sr-only">Example: basic icon</span>
fa-camera-retro fa-camera-retro
</p> </p>
@ -22,7 +22,7 @@
brevity, but using a <code>&lt;span&gt;</code> is more semantically correct). brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
</p> </p>
{% highlight html %} {% highlight html %}
<i class="fa fa-camera-retro" aria-hidden="true"></i> fa-camera-retro <i class="fa fa-camera-retro"></i> fa-camera-retro
{% endhighlight %} {% endhighlight %}
<div class="alert alert-success"> <div class="alert alert-success">
<ul class="fa-ul"> <ul class="fa-ul">

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

@ -4,13 +4,13 @@
<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" aria-hidden="true"></i> Delete</a> <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog" aria-hidden="true"></i> Settings</a> <i class="fa fa-cog"></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" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></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">
@ -30,26 +30,26 @@
</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" aria-hidden="true"></i></span> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></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" aria-hidden="true"></i></span> <span class="input-group-addon"><i class="fa fa-key fa-fw"></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" aria-hidden="true"></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" title="Toggle dropdown menu"></span> <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li> <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" aria-hidden="true"></i> Delete</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" aria-hidden="true"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li> <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -61,12 +61,12 @@
</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" aria-hidden="true"></i> Delete</a> <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#"> <a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog" aria-hidden="true"></i> Settings</a> <i class="fa fa-cog"></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" aria-hidden="true"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-default" href="#"> <a class="btn btn-default" href="#">
@ -98,11 +98,11 @@
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span> <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Edit</a></li> <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" aria-hidden="true"></i> Delete</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" aria-hidden="true"></i> Ban</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="fa fa-unlock" aria-hidden="true"></i> Make admin</a></li> <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}

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" aria-hidden="true"></i>List icons</li> <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>can be used</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" aria-hidden="true"></i>as bullets</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li> <li><i class="fa-li fa fa-square"></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" aria-hidden="true"></i>List icons</li> <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>can be used</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" aria-hidden="true"></i>as bullets</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li> <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div> </div>

11
src/examples.html
View File

@ -20,15 +20,24 @@ relative_path: ../
{% endcapture %} {% endcapture %}
{% include stripe-ad.html %} {% include stripe-ad.html %}
<div class="alert alert-success gg">
<div class="gg-col min-width">
<i class="fa fa-universal-access fa-2x" aria-hidden"true"></i>
</div>
<div class="gg-col padding-left">
<p class="margin-bottom-none">The following examples are kept simple and assume use of <a href="{{ page.relative_path }}get-started/get-started-cdn">Font Awesome CDN</a>, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the <a href="{{ page.relative_path }}examples/#accessible">manual accessibility examples</a> and read more about <a href="{{ page.relative_path }}accessibility">making your icons more awesome for all users</a></p>
</div>
</div>
{% include examples/basic.html %} {% include examples/basic.html %}
{% include examples/larger.html %} {% include examples/larger.html %}
{% include examples/fixed-width.html %} {% include examples/fixed-width.html %}
{% include examples/list.html %} {% include examples/list.html %}
{% include examples/bordered-pulled.html %} {% include examples/bordered-pulled.html %}
{% include examples/animated.html %} {% include examples/animated.html %}
{% include examples/accessible.html %}
{% include examples/rotated-flipped.html %} {% include examples/rotated-flipped.html %}
{% include examples/stacked.html %} {% include examples/stacked.html %}
{% include examples/bootstrap.html %} {% include examples/bootstrap.html %}
{% include examples/custom.html %} {% include examples/custom.html %}
{% include examples/accessible.html %}
</div> </div>