diff options
Diffstat (limited to 'library/font_awesome/src/_includes/examples')
6 files changed, 50 insertions, 58 deletions
diff --git a/library/font_awesome/src/_includes/examples/accessible.html b/library/font_awesome/src/_includes/examples/accessible.html index 2f51aed9c..0360a4621 100644 --- a/library/font_awesome/src/_includes/examples/accessible.html +++ b/library/font_awesome/src/_includes/examples/accessible.html @@ -5,19 +5,16 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <p> - <a class="btn btn-default" href="path/to/settings"> - <i class="fa fa-cog" title="Settings" aria-hidden="true"></i> - <span class="sr-only">Settings</span> + <a class="btn btn-default" href="path/to/settings" aria-label="Settings"> + <i class="fa fa-cog" aria-hidden="true"></i> </a> - <a class="btn btn-danger" href="path/to/settings"> - <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i> - <span class="sr-only">Delete</span> + <a class="btn btn-danger" href="path/to/settings" aria-label="Delete"> + <i class="fa fa-trash-o" aria-hidden="true"></i> </a> - <a class="btn btn-primary" href="#navigation-main"> - <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i> - <span class="sr-only">Skip to main navigation</span> + <a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation"> + <i class="fa fa-bars" aria-hidden="true"></i> </a> </p> @@ -41,9 +38,8 @@ </p> <p> - <a href="path/to/shopping/cart" class="btn btn-primary"> - <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i> - <span class="sr-only">View 3 items in your shopping cart</span> + <a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart"> + <i class="fa fa-shopping-cart" aria-hidden="true"></i> </a> </p> @@ -58,19 +54,16 @@ </p> {% highlight html %} -<a class="btn btn-default" href="path/to/settings"> - <i class="fa fa-cog" title="Settings" aria-hidden="true"></i> - <span class="sr-only">Settings</span> +<a class="btn btn-default" href="path/to/settings" aria-label="Settings"> + <i class="fa fa-cog" aria-hidden="true"></i> </a> -<a class="btn btn-danger" href="path/to/settings"> - <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i> - <span class="sr-only">Delete</span> +<a class="btn btn-danger" href="path/to/settings" aria-label="Delete"> + <i class="fa fa-trash-o" aria-hidden="true"></i> </a> -<a class="btn btn-primary" href="#navigation-main"> - <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i> - <span class="sr-only">Skip to main navigation</span> +<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation"> + <i class="fa fa-bars" aria-hidden="true"></i> </a> {% endhighlight %} @@ -94,9 +87,8 @@ {% endhighlight %} {% highlight html %} -<a href="path/to/shopping/cart" class="btn btn-primary"> - <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i> - <span class="sr-only">View 3 items in your shopping cart</span> +<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart"> + <i class="fa fa-shopping-cart" aria-hidden="true"></i> </a> {% endhighlight %} diff --git a/library/font_awesome/src/_includes/examples/animated.html b/library/font_awesome/src/_includes/examples/animated.html index 960ebd182..927e98bbd 100644 --- a/library/font_awesome/src/_includes/examples/animated.html +++ b/library/font_awesome/src/_includes/examples/animated.html @@ -31,19 +31,19 @@ with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>. </p> {% highlight html %} -<i class="fa fa-spinner fa-spin 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> -<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> -<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> -<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> -<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> {% endhighlight %} <p class="alert alert-success"> diff --git a/library/font_awesome/src/_includes/examples/basic.html b/library/font_awesome/src/_includes/examples/basic.html index 2b691a0b5..c00fb4787 100644 --- a/library/font_awesome/src/_includes/examples/basic.html +++ b/library/font_awesome/src/_includes/examples/basic.html @@ -10,7 +10,7 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <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> fa-camera-retro </p> @@ -22,7 +22,7 @@ brevity, but using a <code><span></code> is more semantically correct). </p> {% 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 %} <div class="alert alert-success"> <ul class="fa-ul"> diff --git a/library/font_awesome/src/_includes/examples/bootstrap.html b/library/font_awesome/src/_includes/examples/bootstrap.html index 0d6c03b8f..bcc6c0171 100644 --- a/library/font_awesome/src/_includes/examples/bootstrap.html +++ b/library/font_awesome/src/_includes/examples/bootstrap.html @@ -4,13 +4,13 @@ <div class="col-md-3 col-sm-4"> <p> <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="#"> - <i class="fa fa-cog" aria-hidden="true"></i> Settings</a> + <i class="fa fa-cog"></i> Settings</a> </p> <p> <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> <div class="margin-bottom"> <div class="btn-group"> @@ -30,26 +30,26 @@ </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" 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"> </div> <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"> </div> </div> <div class="margin-bottom"> <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="#"> <span class="fa fa-caret-down" title="Toggle dropdown menu"></span> </a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa fa-pencil fa-fw" 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><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 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> </div> </div> @@ -61,12 +61,12 @@ </p> {% highlight html %} <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="#"> - <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="#"> - <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"> <a class="btn btn-default" href="#"> @@ -98,11 +98,11 @@ <span class="fa fa-caret-down" title="Toggle dropdown menu"></span> </a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa fa-pencil fa-fw" 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><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 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> </div> {% endhighlight %} diff --git a/library/font_awesome/src/_includes/examples/bordered-pulled.html b/library/font_awesome/src/_includes/examples/bordered-pulled.html index 33f9922ed..b7841f0c2 100644 --- a/library/font_awesome/src/_includes/examples/bordered-pulled.html +++ b/library/font_awesome/src/_includes/examples/bordered-pulled.html @@ -10,7 +10,7 @@ <div class="col-md-3 col-sm-4"> <p> <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i> - …tomorrow we will run faster, stretch out our arms farther… And then one fine morning— + …tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past. </p> </div> @@ -22,7 +22,7 @@ {% highlight html %} <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i> ...tomorrow we will run faster, stretch out our arms farther... -And then one fine morning— So we beat on, boats against the +And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past. {% endhighlight %} </div> diff --git a/library/font_awesome/src/_includes/examples/list.html b/library/font_awesome/src/_includes/examples/list.html index a708902be..1c7f3008f 100644 --- a/library/font_awesome/src/_includes/examples/list.html +++ b/library/font_awesome/src/_includes/examples/list.html @@ -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" 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> + <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> </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" 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> + <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> </ul> {% endhighlight %} </div> |