|
@@ -66,13 +66,13 @@
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<li>
|
|
<a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
|
|
<a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
|
|
- <i class="fas fas-fort-logo fas-lg valign-baseline"></i>
|
|
|
|
|
|
+ <i class="fa fa-fort-awesome fa-lg valign-baseline"></i>
|
|
Fort Awesome
|
|
Fort Awesome
|
|
</a>
|
|
</a>
|
|
</li>
|
|
</li>
|
|
<li class="active">
|
|
<li class="active">
|
|
<a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>& CSS toolkit">
|
|
<a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>& CSS toolkit">
|
|
- <i class="fas fas-flag-logo"></i>
|
|
|
|
|
|
+ <i class="fa fa-font-awesome"></i>
|
|
Font Awesome</a>
|
|
Font Awesome</a>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
@@ -87,7 +87,7 @@
|
|
<i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i>
|
|
<i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i>
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</button>
|
|
</button>
|
|
- <a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
|
|
|
|
|
|
+ <a class="navbar-brand" href="../"><i class="fa fa-font-awesome" aria-hidden="true"></i> Font Awesome</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="navbar-collapse collapse">
|
|
<div class="navbar-collapse collapse">
|
|
@@ -240,19 +240,28 @@
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
+ <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="../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="../examples/#accessible">manual accessibility examples</a> and read more about <a href="../accessibility">making your icons more awesome for all users</a></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<section id="basic">
|
|
<section id="basic">
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Basic Icons
|
|
Basic Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/core.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_core.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/core.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_core.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<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>
|
|
@@ -263,7 +272,7 @@
|
|
name. Font Awesome is designed to be used with inline elements (we like the <code><i></code> tag for
|
|
name. Font Awesome is designed to be used with inline elements (we like the <code><i></code> tag for
|
|
brevity, but using a <code><span></code> is more semantically correct).
|
|
brevity, but using a <code><span></code> is more semantically correct).
|
|
</p>
|
|
</p>
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> fa-camera-retro
|
|
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-camera-retro"</span><span class="nt">></i></span> fa-camera-retro
|
|
</code></pre></div>
|
|
</code></pre></div>
|
|
<div class="alert alert-success">
|
|
<div class="alert alert-success">
|
|
<ul class="fa-ul">
|
|
<ul class="fa-ul">
|
|
@@ -283,8 +292,8 @@
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Larger Icons
|
|
Larger Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/larger.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_larger.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/larger.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_larger.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<div class="row">
|
|
<div class="row">
|
|
@@ -323,8 +332,8 @@
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Fixed Width Icons
|
|
Fixed Width Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_fixed-width.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_fixed-width.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<div class="row">
|
|
<div class="row">
|
|
@@ -356,26 +365,26 @@
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
List Icons
|
|
List Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/list.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_list.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/list.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_list.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<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" 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>
|
|
</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>
|
|
<div class="highlight"><pre><code class="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"fa-ul"</span><span class="nt">></span>
|
|
<div class="highlight"><pre><code class="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"fa-ul"</span><span class="nt">></span>
|
|
- <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-check-square"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>List icons<span class="nt"></li></span>
|
|
|
|
- <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-check-square"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>can be used<span class="nt"></li></span>
|
|
|
|
- <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-spinner fa-spin"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>as bullets<span class="nt"></li></span>
|
|
|
|
- <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-square"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>in lists<span class="nt"></li></span>
|
|
|
|
|
|
+ <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-check-square"</span><span class="nt">></i></span>List icons<span class="nt"></li></span>
|
|
|
|
+ <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-check-square"</span><span class="nt">></i></span>can be used<span class="nt"></li></span>
|
|
|
|
+ <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-spinner fa-spin"</span><span class="nt">></i></span>as bullets<span class="nt"></li></span>
|
|
|
|
+ <span class="nt"><li><i</span> <span class="na">class=</span><span class="s">"fa-li fa fa-square"</span><span class="nt">></i></span>in lists<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></ul></span>
|
|
</code></pre></div>
|
|
</code></pre></div>
|
|
</div>
|
|
</div>
|
|
@@ -386,8 +395,8 @@
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Bordered & Pulled Icons
|
|
Bordered & Pulled Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<div class="row">
|
|
<div class="row">
|
|
@@ -416,8 +425,8 @@ current, borne back ceaselessly into the past.
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Animated Icons
|
|
Animated Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/animated.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_animated.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/animated.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_animated.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<div class="row">
|
|
<div class="row">
|
|
@@ -444,19 +453,19 @@ current, borne back ceaselessly into the past.
|
|
Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
|
|
Use the <code>fa-spin</code> class to get any icon to rotate, and use <code>fa-pulse</code> to have it rotate
|
|
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>
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"</span><span class="nt">></i></span>
|
|
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-spinner fa-spin fa-3x fa-fw"</span><span class="nt">></i></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
|
|
|
|
-<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"</span><span class="nt">></i></span>
|
|
|
|
|
|
+<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-circle-o-notch fa-spin fa-3x fa-fw"</span><span class="nt">></i></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
|
|
|
|
-<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"</span><span class="nt">></i></span>
|
|
|
|
|
|
+<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-refresh fa-spin fa-3x fa-fw"</span><span class="nt">></i></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
|
|
|
|
-<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog fa-spin fa-3x fa-fw margin-bottom"</span><span class="nt">></i></span>
|
|
|
|
|
|
+<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog fa-spin fa-3x fa-fw"</span><span class="nt">></i></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
|
|
|
|
-<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"</span><span class="nt">></i></span>
|
|
|
|
|
|
+<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-spinner fa-pulse fa-3x fa-fw"</span><span class="nt">></i></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Loading...<span class="nt"></span></span>
|
|
</code></pre></div>
|
|
</code></pre></div>
|
|
<p class="alert alert-success">
|
|
<p class="alert alert-success">
|
|
@@ -472,117 +481,12 @@ current, borne back ceaselessly into the past.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
|
|
- <section id="accessible">
|
|
|
|
- <h2 class="page-header">
|
|
|
|
- Accessibility-Minded
|
|
|
|
- </h2>
|
|
|
|
- <div class="row">
|
|
|
|
- <div class="col-md-3 col-sm-4">
|
|
|
|
- <p>
|
|
|
|
- <a class="btn btn-default" href="path/to/settings">
|
|
|
|
- <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
|
|
|
|
- <span class="sr-only">Settings</span>
|
|
|
|
- </a>
|
|
|
|
-
|
|
|
|
- <a class="btn btn-danger" href="path/to/settings">
|
|
|
|
- <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
|
|
|
|
- <span class="sr-only">Delete</span>
|
|
|
|
- </a>
|
|
|
|
-
|
|
|
|
- <a class="btn btn-primary" href="#navigation-main">
|
|
|
|
- <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
|
|
|
|
- <span class="sr-only">Skip to main navigation</span>
|
|
|
|
- </a>
|
|
|
|
- </p>
|
|
|
|
-
|
|
|
|
- <p>
|
|
|
|
- <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
|
|
|
|
- <span class="sr-only">Refreshing...</span>
|
|
|
|
-
|
|
|
|
- <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
|
|
|
|
- <span class="sr-only">Saving. Hang tight!</span>
|
|
|
|
- </p>
|
|
|
|
-
|
|
|
|
- <p>
|
|
|
|
- <div class="input-group margin-bottom-sm">
|
|
|
|
- <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
|
|
|
|
- <input class="form-control" type="text" placeholder="Email address">
|
|
|
|
- </div>
|
|
|
|
- <div class="input-group">
|
|
|
|
- <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
|
|
|
|
- <input class="form-control" type="password" placeholder="Password">
|
|
|
|
- </div>
|
|
|
|
- </p>
|
|
|
|
-
|
|
|
|
- <p>
|
|
|
|
- <a href="path/to/shopping/cart" class="btn btn-primary">
|
|
|
|
- <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
|
|
|
|
- <span class="sr-only">View 3 items in your shopping cart</span>
|
|
|
|
- </a>
|
|
|
|
- </p>
|
|
|
|
-
|
|
|
|
- <p>
|
|
|
|
- <i class="fa fa-battery-half" aria-hidden="true"></i>
|
|
|
|
- <span class="sr-only">Battery level: 50%</span>
|
|
|
|
- </p>
|
|
|
|
- </div>
|
|
|
|
- <div class="col-md-9 col-sm-8">
|
|
|
|
- <p>
|
|
|
|
- With <a href="../accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
|
|
|
|
- </p>
|
|
|
|
-
|
|
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">href=</span><span class="s">"path/to/settings"</span><span class="nt">></span>
|
|
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
- <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Settings<span class="nt"></span></span>
|
|
|
|
-<span class="nt"></a></span>
|
|
|
|
-
|
|
|
|
-<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">href=</span><span class="s">"path/to/settings"</span><span class="nt">></span>
|
|
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-trash-o"</span> <span class="na">title=</span><span class="s">"Delete"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
- <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Delete<span class="nt"></span></span>
|
|
|
|
-<span class="nt"></a></span>
|
|
|
|
-
|
|
|
|
-<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">href=</span><span class="s">"#navigation-main"</span><span class="nt">></span>
|
|
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-bars"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"Skip to main navigation"</span><span class="nt">></i></span>
|
|
|
|
- <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Skip to main navigation<span class="nt"></span></span>
|
|
|
|
-<span class="nt"></a></span>
|
|
|
|
-</code></pre></div>
|
|
|
|
-
|
|
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-refresh fa-spin fa-3x fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
-<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Refreshing...<span class="nt"></span></span>
|
|
|
|
-
|
|
|
|
-<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog fa-spin fa-3x fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
-<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Saving. Hang tight!<span class="nt"></span></span>
|
|
|
|
-</code></pre></div>
|
|
|
|
-
|
|
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group margin-bottom-sm"</span><span class="nt">></span>
|
|
|
|
- <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-envelope-o fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span></span>
|
|
|
|
- <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Email address"</span><span class="nt">></span>
|
|
|
|
-<span class="nt"></div></span>
|
|
|
|
-<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
|
|
|
- <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-key fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span></span>
|
|
|
|
- <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
|
|
|
-<span class="nt"></div></span>
|
|
|
|
-</code></pre></div>
|
|
|
|
-
|
|
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"path/to/shopping/cart"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>
|
|
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shopping-cart"</span> <span class="na">title=</span><span class="s">"View 3 items in your shopping cart"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
- <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>View 3 items in your shopping cart<span class="nt"></span></span>
|
|
|
|
-<span class="nt"></a></span>
|
|
|
|
-</code></pre></div>
|
|
|
|
-
|
|
|
|
-<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-battery-half"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
-<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Battery level: 50%<span class="nt"></span></span>
|
|
|
|
-</code></pre></div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
-</section>
|
|
|
|
-
|
|
|
|
<section id="rotated-flipped">
|
|
<section id="rotated-flipped">
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Rotated & Flipped
|
|
Rotated & Flipped
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<div class="row">
|
|
<div class="row">
|
|
@@ -615,8 +519,8 @@ current, borne back ceaselessly into the past.
|
|
<h2 class="page-header">
|
|
<h2 class="page-header">
|
|
Stacked Icons
|
|
Stacked Icons
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/less/stacked.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
- <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.2/scss/_stacked.scss" class="text-muted">View SASS</a>
|
|
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/less/stacked.less" class="text-muted padding-right">View LESS</a>
|
|
|
|
+ <a href="https://github.com/FortAwesome/Font-Awesome/blob/v4.6.3/scss/_stacked.scss" class="text-muted">View SASS</a>
|
|
</div>
|
|
</div>
|
|
</h2>
|
|
</h2>
|
|
<div class="row">
|
|
<div class="row">
|
|
@@ -682,13 +586,13 @@ fa-ban on fa-camera
|
|
<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 4.6.2</a>
|
|
|
|
|
|
+ <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.6.3</a>
|
|
</p>
|
|
</p>
|
|
<div class="margin-bottom">
|
|
<div class="margin-bottom">
|
|
<div class="btn-group">
|
|
<div class="btn-group">
|
|
@@ -708,26 +612,26 @@ fa-ban on fa-camera
|
|
</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-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 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>
|
|
@@ -738,12 +642,12 @@ fa-ban on fa-camera
|
|
Font Awesome works great with the full range of Bootstrap components.
|
|
Font Awesome works great with the full range of Bootstrap components.
|
|
</p>
|
|
</p>
|
|
<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-trash-o fa-lg"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Delete<span class="nt"></a></span>
|
|
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-trash-o fa-lg"</span><span class="nt">></i></span> Delete<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default btn-sm"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default btn-sm"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Settings<span class="nt"></a></span>
|
|
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog"</span><span class="nt">></i></span> Settings<span class="nt"></a></span>
|
|
|
|
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-success"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-success"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
- <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-flag fa-2x pull-left"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Font Awesome<span class="nt"><br></span>Version 4.6.2<span class="nt"></a></span>
|
|
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-flag fa-2x pull-left"</span><span class="nt">></i></span> Font Awesome<span class="nt"><br></span>Version 4.6.3<span class="nt"></a></span>
|
|
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
|
@@ -775,11 +679,11 @@ fa-ban on fa-camera
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa fa-caret-down"</span> <span class="na">title=</span><span class="s">"Toggle dropdown menu"</span><span class="nt">></span></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"fa fa-caret-down"</span> <span class="na">title=</span><span class="s">"Toggle dropdown menu"</span><span class="nt">></span></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></a></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
|
- <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-pencil fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Edit<span class="nt"></a></li></span>
|
|
|
|
- <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-trash-o fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Delete<span class="nt"></a></li></span>
|
|
|
|
- <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-ban fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Ban<span class="nt"></a></li></span>
|
|
|
|
|
|
+ <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-pencil fa-fw"</span><span class="nt">></i></span> Edit<span class="nt"></a></li></span>
|
|
|
|
+ <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-trash-o fa-fw"</span><span class="nt">></i></span> Delete<span class="nt"></a></li></span>
|
|
|
|
+ <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-ban fa-fw"</span><span class="nt">></i></span> Ban<span class="nt"></a></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
|
|
- <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-unlock"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span> Make admin<span class="nt"></a></li></span>
|
|
|
|
|
|
+ <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-unlock"</span><span class="nt">></i></span> Make admin<span class="nt"></a></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
</code></pre></div>
|
|
</code></pre></div>
|
|
@@ -804,6 +708,111 @@ fa-ban on fa-camera
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
|
+ <section id="accessible">
|
|
|
|
+ <h2 class="page-header">
|
|
|
|
+ Accessibility-Minded
|
|
|
|
+ </h2>
|
|
|
|
+ <div class="row">
|
|
|
|
+ <div class="col-md-3 col-sm-4">
|
|
|
|
+ <p>
|
|
|
|
+ <a class="btn btn-default" href="path/to/settings">
|
|
|
|
+ <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
|
|
|
|
+ <span class="sr-only">Settings</span>
|
|
|
|
+ </a>
|
|
|
|
+
|
|
|
|
+ <a class="btn btn-danger" href="path/to/settings">
|
|
|
|
+ <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
|
|
|
|
+ <span class="sr-only">Delete</span>
|
|
|
|
+ </a>
|
|
|
|
+
|
|
|
|
+ <a class="btn btn-primary" href="#navigation-main">
|
|
|
|
+ <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
|
|
|
|
+ <span class="sr-only">Skip to main navigation</span>
|
|
|
|
+ </a>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ <p>
|
|
|
|
+ <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
|
|
|
|
+ <span class="sr-only">Refreshing...</span>
|
|
|
|
+
|
|
|
|
+ <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
|
|
|
|
+ <span class="sr-only">Saving. Hang tight!</span>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ <p>
|
|
|
|
+ <div class="input-group margin-bottom-sm">
|
|
|
|
+ <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
|
|
|
|
+ <input class="form-control" type="text" placeholder="Email address">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="input-group">
|
|
|
|
+ <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
|
|
|
|
+ <input class="form-control" type="password" placeholder="Password">
|
|
|
|
+ </div>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ <p>
|
|
|
|
+ <a href="path/to/shopping/cart" class="btn btn-primary">
|
|
|
|
+ <i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
|
|
|
|
+ <span class="sr-only">View 3 items in your shopping cart</span>
|
|
|
|
+ </a>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ <p>
|
|
|
|
+ <i class="fa fa-battery-half" aria-hidden="true"></i>
|
|
|
|
+ <span class="sr-only">Battery level: 50%</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="col-md-9 col-sm-8">
|
|
|
|
+ <p>
|
|
|
|
+ With <a href="../accessibility/">our thoughts on icon accessibility</a> in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">href=</span><span class="s">"path/to/settings"</span><span class="nt">></span>
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
+ <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Settings<span class="nt"></span></span>
|
|
|
|
+<span class="nt"></a></span>
|
|
|
|
+
|
|
|
|
+<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">href=</span><span class="s">"path/to/settings"</span><span class="nt">></span>
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-trash-o"</span> <span class="na">title=</span><span class="s">"Delete"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
+ <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Delete<span class="nt"></span></span>
|
|
|
|
+<span class="nt"></a></span>
|
|
|
|
+
|
|
|
|
+<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">href=</span><span class="s">"#navigation-main"</span><span class="nt">></span>
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-bars"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"Skip to main navigation"</span><span class="nt">></i></span>
|
|
|
|
+ <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Skip to main navigation<span class="nt"></span></span>
|
|
|
|
+<span class="nt"></a></span>
|
|
|
|
+</code></pre></div>
|
|
|
|
+
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-refresh fa-spin fa-3x fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
+<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Refreshing...<span class="nt"></span></span>
|
|
|
|
+
|
|
|
|
+<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-cog fa-spin fa-3x fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
+<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Saving. Hang tight!<span class="nt"></span></span>
|
|
|
|
+</code></pre></div>
|
|
|
|
+
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group margin-bottom-sm"</span><span class="nt">></span>
|
|
|
|
+ <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-envelope-o fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span></span>
|
|
|
|
+ <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Email address"</span><span class="nt">></span>
|
|
|
|
+<span class="nt"></div></span>
|
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
|
|
|
+ <span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-key fa-fw"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span></span>
|
|
|
|
+ <span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
|
|
|
+<span class="nt"></div></span>
|
|
|
|
+</code></pre></div>
|
|
|
|
+
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"path/to/shopping/cart"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>
|
|
|
|
+ <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-shopping-cart"</span> <span class="na">title=</span><span class="s">"View 3 items in your shopping cart"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
+ <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>View 3 items in your shopping cart<span class="nt"></span></span>
|
|
|
|
+<span class="nt"></a></span>
|
|
|
|
+</code></pre></div>
|
|
|
|
+
|
|
|
|
+<div class="highlight"><pre><code class="html"><span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-battery-half"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span>
|
|
|
|
+<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Battery level: 50%<span class="nt"></span></span>
|
|
|
|
+</code></pre></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</section>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -823,7 +832,7 @@ fa-ban on fa-camera
|
|
</a>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.2
|
|
|
|
|
|
+ <i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.3
|
|
<span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg">
|
|
<span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg">
|
|
Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
|
|
Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
|
|
</div>
|
|
</div>
|