diff options
Diffstat (limited to 'library/font_awesome/src/_includes')
20 files changed, 172 insertions, 127 deletions
diff --git a/library/font_awesome/src/_includes/accessibility/accessibility-facdn.html b/library/font_awesome/src/_includes/accessibility/accessibility-facdn.html new file mode 100644 index 000000000..624e0fcec --- /dev/null +++ b/library/font_awesome/src/_includes/accessibility/accessibility-facdn.html @@ -0,0 +1,21 @@ +<section id="accessibility-cdn" class="accessibility-cdn"> + <div class="row"> + <div class="col-md-8"> + <h3> + <i class="gg-col fa fa-magic text-muted fa-lg padding-right" aria-hidden="true"></i> + Use Font Awesome CDN's auto accessibility + </h3> + + <p><a href="{{ page.relative_path }}get-started/#get-started-cdn">Font Awesome CDN</a> helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting, <a href="https://cdn.fontawesome.com/help#qa-autoa11y">use our simple syntax</a>, and any icons you use will have all of the best practices and manual techniques below <strong>applied automatically</strong>.</p> + </div> + + <div class="col-md-4"> + <a href="{{ page.relative_path }}get-started/#get-started-cdn" class="btn btn-success btn-block btn-lg margin-top-lg margin-bottom">Automate Your Icons' Accessibility</a> + + <p class="text-sm text-center margin-bottom-none"> + <a href="https://cdn.fontawesome.com/help#qa-autoa11y">Read more about our auto accessibility</a> + </p> + </div> + </div> + +</section> diff --git a/library/font_awesome/src/_includes/accessibility/using-with-accessibility.html b/library/font_awesome/src/_includes/accessibility/accessibility-manual.html index 86e6d609c..c886ba85b 100644 --- a/library/font_awesome/src/_includes/accessibility/using-with-accessibility.html +++ b/library/font_awesome/src/_includes/accessibility/accessibility-manual.html @@ -1,13 +1,14 @@ -<div id="using-with-accessibility"> - <h2 class="page-header">Using Font Awesome with Acessibility in mind</h2> - <p> - When using icons in your UI, there are ways to help assistive technology either ignore or better understand Font Awesome. - </p> +<section id="accessibility-manual" class="accessibility-manual"> - <h3>Icons used for pure decoration or visual styling</h3> - <p> - If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup. - </p> + <h3> + <i class="gg-col fa fa-wrench text-muted fa-lg padding-right" aria-hidden="true"></i> + Manually make your icons accessible + </h3> + + <p>When using icons in your UI, there are manual techniques and ways to help assistive technology either ignore or better understand Font Awesome.</p> + + <h4 class="margin-top-xl">Icons used for pure decoration or visual styling</h4> + <p>If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the <code>aria-hidden="true"</code> to your Font Awesome markup.</p> <div class="margin-top-lg margin-bottom-lg"> {% highlight html %} @@ -33,12 +34,12 @@ <small class="text-muted">an icon being used in front of link text</small> </div> - <h3>Icons with semantic or interactive purpose</h3> + <h4 class="margin-top-xl">Icons with semantic or interactive purpose</h4> <p> If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.). There are a few techniques to accomplish this: </p> - <h4>If an icon is <strong>not</strong> an interactive element</h4> + <h4 class="margin-top-xl text-muted">If an icon is <strong>not</strong> an interactive element</h4> <p> The simplest way to provide a text alternative is to use the <code>aria-hidden="true"</code> attribute on the icon and to include the text with an additional element, such as a <code><span></code>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a <code>title</code> attribute on the icon to provide a tooltip for sighted mouse users. </p> @@ -76,14 +77,14 @@ <small class="text-muted">an icon being used to denote time remaining</small> </div> - <h4>If an icon represents an interactive element</h4> + <h4 class="margin-top-xl text-muted">If an icon represents an interactive element</h4> <p> - In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code><span></code> or similar. For instance, simply adding the <code>title</code> attribute to the interactive element itself will be sufficient to provide an accessible alternative name for the element, as well as providing the mouse tooltip. + In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <code><span></code> or similar. For instance, simply adding the <code>aria-label</code> attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the <code>title</code> attribute or a <a href="https://github.com/chinchang/hint.css">custom tooltip</a> solution. </p> <div class="margin-bottom-lg margin-top-lg"> {% highlight html %} -<a href="path/to/shopping/cart" title="View 3 items in your shopping cart"> +<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> </a> {% endhighlight %} @@ -92,36 +93,29 @@ <div class="margin-bottom-lg margin-top-lg"> {% highlight html %} -<a href="#navigation-main" title="Skip to main navigation"> +<a href="#navigation-main" aria-label="Skip to main navigation"> <i class="fa fa-bars" aria-hidden="true"></i> </a> {% endhighlight %} <small class="text-muted">an icon being used as a link to a navigation menu</small> + </div> + <div class="margin-bottom-lg margin-top-lg"> {% highlight html %} -<a class="btn btn-danger" href="path/to/settings" title="Delete"> - <i class="fa fa-trash-o" aria-hidden="true"></i> +<a class="btn btn-danger" href="path/to/settings" aria-label="Delete"> + <i class="fa fa-trash-o" aria-hidden="true" title="Delete this item?"></i> </a> {% endhighlight %} - <small class="text-muted">an icon being used as a delete button's symbol</small> + <small class="text-muted">an icon being used as a delete button's symbol with a <code>title</code> attribute to provide a native mouse tooltip</small> + </div> + + <div class="alert alert-success"> + <ul class="fa-ul margin-bottom-none"> + <li> + <i class="fa-li fa fa-info-circle fa-lg" aria-hidden"true"></i> + <a href="{{ page.relative_path }}examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI. + </li> + </ul> </div> -</div> - -<div class="alert alert-success"> - <ul class="fa-ul margin-bottom-none"> - <li> - <i class="fa-li fa fa-info-circle fa-lg" aria-hidden="true"></i> - Bootstrap comes with a <a href="http://getbootstrap.com/css/#callout-has-feedback-icon-accessibility">utility class to visually hide content, but keep it semantically accessible</a>. If you're not using Bootstrap, there are <a href="https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">plenty</a> of <a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L124">recipes</a> to roll your own from. - </li> - </ul> -</div> - -<div class="alert alert-success"> - <ul class="fa-ul margin-bottom-none"> - <li> - <i class="fa-li fa fa-info-circle fa-lg" aria-hidden"true"></i> - <a href="{{ page.relative_path }}examples/#accessible">See more examples of how to add accessibility-minded icons</a> into your UI. - </li> - </ul> -</div> +</section> diff --git a/library/font_awesome/src/_includes/accessibility/background.html b/library/font_awesome/src/_includes/accessibility/background.html index 5ca864826..da97e4762 100644 --- a/library/font_awesome/src/_includes/accessibility/background.html +++ b/library/font_awesome/src/_includes/accessibility/background.html @@ -1,7 +1,7 @@ -<div id="background"> - <h2 class="page-header">Icon Fonts & Accessibility</h2> +<div id="accessibility-background"> + <h4 class="margin-top-none">About Icon Fonts & Accessibility</h4> <p> - Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When trying our default markup for rendering icons, assisistive technology may have the following problems. + Modern versions of assistive technology, like screen readers, will read CSS generated content (how Font Awesome icons are rendered), as well as specific Unicode characters. When reading our default markup for rendering icons, assisistive technology may have the following problems. </p> <ul> diff --git a/library/font_awesome/src/_includes/accessibility/cta-cdn-ally.html b/library/font_awesome/src/_includes/accessibility/cta-cdn-ally.html new file mode 100644 index 000000000..61d4fe3a6 --- /dev/null +++ b/library/font_awesome/src/_includes/accessibility/cta-cdn-ally.html @@ -0,0 +1,11 @@ +<div class="well text-center"> + <div class="text-center margin-bottom"> + <i class="gg-col fa fa-magic fa-3x text-muted padding-right" aria-hidden="true"></i> + <i class="gg-col fa fa-plus fa-2x text-muted padding-right" aria-hidden="true"></i> + <i class="gg-col fa fa-universal-access fa-3x text-muted" aria-hidden="true"></i> + </div> + <h3>Automate your icons' accessibility</h3> + <p><a href="{{ page.relative_path }}get-started/#get-started-cdn">Font Awesome CDN</a> helps you automate accessibility support more easily so your icons work for the most people possible. You only need turn on a setting and any icons you use will have all of the best practices we recommend applied automatically.</p> + + <a href="{{ page.relative_path }}get-started/#get-started-cdn" class="btn btn-success btn-lg">Get Automated Accessibility</a> +</div> diff --git a/library/font_awesome/src/_includes/accessibility/other.html b/library/font_awesome/src/_includes/accessibility/other.html index 8a1078383..d3054ba8c 100644 --- a/library/font_awesome/src/_includes/accessibility/other.html +++ b/library/font_awesome/src/_includes/accessibility/other.html @@ -1,7 +1,7 @@ -<div id="other"> +<section id="accessibility-other" class="accessibility-other"> <h2 class="page-header">Other cases and information</h2> <p> - While the scenarios and techniques above help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend. + While the scenarios and techniques here help avoid some serious issues and confusion, they are not exhaustive. There are many complex contexts and use cases when it comes to accessibility, such as users with low vision who need a high color contrast ratio to see UI. There are some great tools and resources to learn from and work on these issues out there. Here are a few reads we recommend. </p> <ul> @@ -14,4 +14,4 @@ <p> We'll continue to work on these under the larger topic of accessibility, but in the meantime, <a href="{{ page.relative_path }}community/#reporting-bugs">let us know if any bugs or issues</a>. </p> -</div> +</section> diff --git a/library/font_awesome/src/_includes/brand-license.html b/library/font_awesome/src/_includes/brand-license.html index 79696801e..731aa354a 100644 --- a/library/font_awesome/src/_includes/brand-license.html +++ b/library/font_awesome/src/_includes/brand-license.html @@ -2,4 +2,5 @@ <li>All brand icons are trademarks of their respective owners.</li> <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li> <li>Brand icons should only be used to represent the company or product to which they refer.</li> + <li class="strong">Please do not use brand logos for any purpose except to represent that particular brand or service.</li> </ul> diff --git a/library/font_awesome/src/_includes/community/requesting-new-icons.html b/library/font_awesome/src/_includes/community/requesting-new-icons.html index e73f41c35..d08aa16ff 100644 --- a/library/font_awesome/src/_includes/community/requesting-new-icons.html +++ b/library/font_awesome/src/_includes/community/requesting-new-icons.html @@ -7,7 +7,7 @@ </p> <ol> <li>Please be nice. Font Awesome is a happy place.</li> - <li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists. If a request is found, please +1 that one.</li> + <li>Please <a href="{{ site.fontawesome.github.url }}/search?type=Issues">search</a> to see if your icon request already exists. If a request is found, please add a 👍 reaction to that one.</li> <li> Please make requests for single icons, unless you are requesting a couple of strictly related icons (e.g., thumbs-up/thumbs-down). </li> 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> diff --git a/library/font_awesome/src/_includes/footer.html b/library/font_awesome/src/_includes/footer.html index e299adf2e..d15a65524 100644 --- a/library/font_awesome/src/_includes/footer.html +++ b/library/font_awesome/src/_includes/footer.html @@ -1,17 +1,12 @@ <footer id="footer" class="footer hidden-print"> <div class="container text-center"> - <div id="bsap_1298241" class="bsarocks bsap_b1146e3f9fa32a794fc6d2c7be47ece8"> - <a href="https://www.approveme.me/?utm_source=fontawesome.io&utm_medium=banner&utm_term=Sign%20Documents%20using%20Your%20Wordpress&utm_content=220x65-1e-try-a-free-demo-now_2x_bw&utm_campaign=fontawesome" - title="Sign Documents using Your Wordpress" target="_blank" rel="nofollow" - onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'approve.me']);"> - <img src="{{ page.relative_path }}assets/img/logo-approveme.png" width="220" height="65" alt=""> - </a> + <div id="inventory"> <a href="http://www.wpbeginner.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Beginner's Guide to WordPress" target="_blank" rel="nofollow" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'wpbeginner.com']);"> <img src="{{ page.relative_path }}assets/img/logo-wpbeginner.png" width="220" height="65" alt=""> </a> - <a href="https://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" + <a href="http://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome" title="Premium Wordpress Themes" target="_blank" rel="nofollow" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'themeisle.com']);"> <img src="{{ page.relative_path }}assets/img/logo-themeisle.png" width="220" height="65" alt=""> @@ -30,7 +25,7 @@ Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a> </div> <div> - Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378/"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a> + Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378/"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="https://www.bootstrapcdn.com/fontawesome/">BootstrapCDN for Font Awesome</a> </div> <div class="project"> <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> · diff --git a/library/font_awesome/src/_includes/icons/brand.html b/library/font_awesome/src/_includes/icons/brand.html index 451f147d3..3243bc83e 100644 --- a/library/font_awesome/src/_includes/icons/brand.html +++ b/library/font_awesome/src/_includes/icons/brand.html @@ -1,10 +1,6 @@ <section id="brand"> <h2 class="page-header">Brand Icons</h2> - <div class="alert alert-warning"> - {% include brand-adblock-warning.html %} - </div> - <div class="row fontawesome-icon-list margin-bottom-lg"> {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %} @@ -13,6 +9,10 @@ {% endfor %} </div> + <div class="alert alert-warning"> + {% include brand-adblock-warning.html %} + </div> + <div class="alert alert-success"> {% include brand-license.html %} </div> diff --git a/library/font_awesome/src/_includes/jumbotron-carousel.html b/library/font_awesome/src/_includes/jumbotron-carousel.html index 1f2b211f0..bf938adec 100644 --- a/library/font_awesome/src/_includes/jumbotron-carousel.html +++ b/library/font_awesome/src/_includes/jumbotron-carousel.html @@ -24,8 +24,10 @@ <div id="icon-carousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> - <div class="active item"><div><i class="fa fa-flag" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div> - <div class="item"><div><i class="fa fa-universal-access" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div> + <div class="active item"><div><i class="fa fa-font-awesome" aria-hidden="true"></i><span class="sr-only">flag icon</span></div></div> + <div class="item"><div><i class="fa fa-handshake-o" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div> + <div class="item"><div><i class="fa fa-bath" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div> + <div class="item"><div><i class="fa fa-envelope-open-o" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div> <div class="item"><div><i class="fa fa-fort-awesome" aria-hidden="true"></i><span class="sr-only">fort awesome icon</span></div></div> <div class="item"><div><i class="fa fa-commenting" aria-hidden="true"></i><span class="sr-only">commenting icon</span></div></div> <div class="item"><div><i class="fa fa-map-signs" aria-hidden="true"></i><span class="sr-only">map signs icon</span></div></div> diff --git a/library/font_awesome/src/_includes/modals/download.html b/library/font_awesome/src/_includes/modals/download.html index a7105e69b..384620bdc 100644 --- a/library/font_awesome/src/_includes/modals/download.html +++ b/library/font_awesome/src/_includes/modals/download.html @@ -41,7 +41,7 @@ </div> </div> - <a href="https://fortawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_5.0_update" class="btn btn-success btn-lg btn-block"> + <a href="https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" class="btn btn-success btn-lg btn-block"> Take your icon game <br class="visible-xs" />to the next level with <h2 class="margin-top-sm margin-bottom-sm hidden-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i> Fort Awesome</h2> <h3 class="margin-top-sm margin-bottom-sm visible-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i> Fort Awesome</h3> diff --git a/library/font_awesome/src/_includes/modals/kickstarter.html b/library/font_awesome/src/_includes/modals/kickstarter.html new file mode 100644 index 000000000..7f6f770eb --- /dev/null +++ b/library/font_awesome/src/_includes/modals/kickstarter.html @@ -0,0 +1,24 @@ +<div class="modal fade" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label" + xmlns="http://www.w3.org/1999/html"> + <div class="modal-dialog modal-lg" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i><span class="close"></span></button> + <h2 class="modal-title" id="modal-kickstarter-label"> + <i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i> Font Awesome 5! + </h2> + </div> + <div class="modal-body"> + + <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> + <div class='embed-container'><iframe src='https://www.youtube.com/embed/CNoH3J7iSrA' frameborder='0' allowfullscreen></iframe></div> + + <a class="btn btn-kickstarter btn-lg btn-block margin-top" href="http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=kickstarter_modal&utm_campaign=promo_4.7_update" + onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Check out the Kickstarter']);"> + <h3 class="margin text-sans-serif strong">Check out the <br class="hide-sm hide-md hide-lg">Kickstarter! <i class="fa fa-external-link-square" aria-hidden="true"></i></h3> + </a> + + </div> + </div> + </div> +</div> diff --git a/library/font_awesome/src/_includes/navbar.html b/library/font_awesome/src/_includes/navbar.html index 462da85c8..97f4dc789 100644 --- a/library/font_awesome/src/_includes/navbar.html +++ b/library/font_awesome/src/_includes/navbar.html @@ -5,7 +5,7 @@ <span id="rotating-message"></span> </div> <div class="action"> - <a id="rotating-url" class="btn btn-primary btn-block" href=""></a> + <a id="rotating-url" class="btn btn-primary btn-lg btn-block" href=""></a> </div> </div> </div> @@ -15,14 +15,20 @@ <div class="container"> <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> + <a href="http://fortawesome.com/start?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_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="fa fa-fort-awesome fa-lg valign-baseline"></i> Fort Awesome </a> </li> + <li> + <a href="http://symbolset.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Get the perfect icon set!"> + <i class="fas fas-heart-ss"></i> + Symbolset + </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> + <a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_{{ site.fontawesome.minor_version }}_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>& CSS toolkit"> + <i class="fa fa-font-awesome"></i> Font Awesome</a> </li> </ul> @@ -37,7 +43,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="{{ page.relative_path }}"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a> + <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-font-awesome" aria-hidden="true"></i> Font Awesome</a> </div> <div class="navbar-collapse collapse"> @@ -65,7 +71,7 @@ <ul class="dropdown-menu pull-right"> <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i> All Icons</a></li> <li class="divider"></li> - <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li> + <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-handshake-o fa-fw" aria-hidden="true"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li> <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i> Web Application Icons</a></li> <li><a href="{{ page.relative_path }}icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i> Accessibility Icons</a></li> <li><a href="{{ page.relative_path }}icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i> Hand Icons</a></li> @@ -111,11 +117,10 @@ <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "accessibility" %} active{% endif %}"><a href="{{ page.relative_path }}accessibility/"><i class="fa fa-universal-access"></i></a></li> <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li> <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li> - <li class="hidden-sm hidden-xs"><a href="{{ site.fontawesome.blog_url }}">Blog</a></li> </ul> <ul class="nav navbar-nav navbar-right"> - <li{% if page.navbar_active == "store" %} class="active"{% endif %}><a href="{{ page.relative_path }}store/"><i class="fa fa-shopping-cart margin-right-sm hidden-sm hidden-md"></i>Store</a></li> + <li><a href="{{ site.fontawesome.blog_url }}">Blog</a></li> </ul> </div> </div> diff --git a/library/font_awesome/src/_includes/thanks-to.html b/library/font_awesome/src/_includes/thanks-to.html index e48a65f06..8aebf591c 100644 --- a/library/font_awesome/src/_includes/thanks-to.html +++ b/library/font_awesome/src/_includes/thanks-to.html @@ -18,7 +18,7 @@ <div class="col-md-4 col-sm-4"> <p> Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378"><i class="fa fa-maxcdn" aria-hidden="true"> </i>MaxCDN</a> for providing the excellent - <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN</a>, the fastest and easiest way to + <a href="https://www.bootstrapcdn.com/fontawesome/">BootstrapCDN</a>, the fastest and easiest way to <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome. </p> </div> |