|
@@ -66,13 +66,13 @@
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
|
<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!">
|
|
|
- <i class="fas fas-fort-logo fas-lg valign-baseline"></i>
|
|
|
+ <i class="fa fa-fort-awesome fa-lg valign-baseline"></i>
|
|
|
Fort Awesome
|
|
|
</a>
|
|
|
</li>
|
|
|
<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">
|
|
|
- <i class="fas fas-flag-logo"></i>
|
|
|
+ <i class="fa fa-font-awesome"></i>
|
|
|
Font Awesome</a>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -87,7 +87,7 @@
|
|
|
<i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i>
|
|
|
<span class="sr-only">Toggle navigation</span>
|
|
|
</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 class="navbar-collapse collapse">
|
|
@@ -240,19 +240,28 @@
|
|
|
</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">
|
|
|
<h2 class="page-header">
|
|
|
Basic Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
|
|
|
<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>
|
|
@@ -263,7 +272,7 @@
|
|
|
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).
|
|
|
</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>
|
|
|
<div class="alert alert-success">
|
|
|
<ul class="fa-ul">
|
|
@@ -283,8 +292,8 @@
|
|
|
<h2 class="page-header">
|
|
|
Larger Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
<div class="row">
|
|
@@ -323,8 +332,8 @@
|
|
|
<h2 class="page-header">
|
|
|
Fixed Width Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
<div class="row">
|
|
@@ -356,26 +365,26 @@
|
|
|
<h2 class="page-header">
|
|
|
List Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
<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>
|
|
|
<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>
|
|
|
</code></pre></div>
|
|
|
</div>
|
|
@@ -386,8 +395,8 @@
|
|
|
<h2 class="page-header">
|
|
|
Bordered & Pulled Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
<div class="row">
|
|
@@ -416,8 +425,8 @@ current, borne back ceaselessly into the past.
|
|
|
<h2 class="page-header">
|
|
|
Animated Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
<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
|
|
|
with 8 steps. Works well with <code>fa-spinner</code>, <code>fa-refresh</code>, and <code>fa-cog</code>.
|
|
|
</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"><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"><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"><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"><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>
|
|
|
</code></pre></div>
|
|
|
<p class="alert alert-success">
|
|
@@ -472,117 +481,12 @@ current, borne back ceaselessly into the past.
|
|
|
</div>
|
|
|
</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">
|
|
|
<h2 class="page-header">
|
|
|
Rotated & Flipped
|
|
|
<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>
|
|
|
</h2>
|
|
|
<div class="row">
|
|
@@ -615,8 +519,8 @@ current, borne back ceaselessly into the past.
|
|
|
<h2 class="page-header">
|
|
|
Stacked Icons
|
|
|
<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>
|
|
|
</h2>
|
|
|
<div class="row">
|
|
@@ -682,13 +586,13 @@ fa-ban on fa-camera
|
|
|
<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 4.6.2</a>
|
|
|
+ <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.6.3</a>
|
|
|
</p>
|
|
|
<div class="margin-bottom">
|
|
|
<div class="btn-group">
|
|
@@ -708,26 +612,26 @@ fa-ban on fa-camera
|
|
|
</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>
|
|
@@ -738,12 +642,12 @@ fa-ban on fa-camera
|
|
|
Font Awesome works great with the full range of Bootstrap components.
|
|
|
</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>
|
|
|
- <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"><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"><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"><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"></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"><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><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"></div></span>
|
|
|
</code></pre></div>
|
|
@@ -804,6 +708,111 @@ fa-ban on fa-camera
|
|
|
</div>
|
|
|
</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>
|
|
|
|
|
|
|
|
@@ -823,7 +832,7 @@ fa-ban on fa-camera
|
|
|
</a>
|
|
|
</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">
|
|
|
Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
|
|
|
</div>
|