From 9675ee9a6355ee0f56deed4288c870dcf2860852 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 1 Apr 2016 20:28:42 -0400 Subject: [PATCH] WIP - updating site icons with accessibility best practices --- src/_includes/brand-adblock-warning.html | 2 +- .../community/requesting-new-icons.html | 2 +- src/_includes/examples/accessible.html | 35 +++++--- src/_includes/examples/animated.html | 18 ++-- src/_includes/examples/basic.html | 6 +- src/_includes/examples/bootstrap.html | 82 +++++++++++++------ src/_includes/examples/bordered-pulled.html | 2 +- src/_includes/examples/fixed-width.html | 8 +- src/_includes/examples/larger.html | 10 +-- src/_includes/examples/list.html | 16 ++-- src/_includes/examples/rotated-flipped.html | 12 +-- src/_includes/examples/stacked.html | 8 +- src/_includes/footer.html | 2 +- src/_includes/icons/brand.html | 2 +- src/_includes/icons/chart.html | 2 +- src/_includes/icons/currency.html | 2 +- src/_includes/icons/directional.html | 2 +- src/_includes/icons/file-type.html | 2 +- src/_includes/icons/form-control.html | 2 +- src/_includes/icons/gender.html | 2 +- src/_includes/icons/hand.html | 2 +- src/_includes/icons/medical.html | 2 +- src/_includes/icons/new.html | 2 +- src/_includes/icons/payment.html | 2 +- src/_includes/icons/spinner.html | 5 +- src/_includes/icons/text-editor.html | 2 +- src/_includes/icons/transportation.html | 2 +- src/_includes/icons/video-player.html | 2 +- src/_includes/icons/web-application.html | 2 +- src/_includes/jumbotron-carousel.html | 36 ++++---- src/_includes/modals/download.html | 4 +- src/_includes/navbar.html | 44 +++++----- src/_includes/new-features.html | 12 +-- src/_includes/new-naming.html | 50 +++++------ src/_includes/stripe-social.html | 2 +- src/_includes/tell-me-thanks.html | 2 +- .../tests/rotated-flipped-inside-anchor.html | 12 +-- .../tests/rotated-flipped-inside-btn.html | 12 +-- src/_includes/tests/rotated-flipped.html | 12 +-- .../tests/stacked-inside-anchor.html | 20 ++--- src/_includes/tests/stacked-with-text.html | 2 +- src/_includes/tests/stacked.html | 20 ++--- src/_includes/thanks-to.html | 2 +- src/_includes/why.html | 18 ++-- 44 files changed, 268 insertions(+), 218 deletions(-) diff --git a/src/_includes/brand-adblock-warning.html b/src/_includes/brand-adblock-warning.html index eb6ee670f..b512cbbb1 100644 --- a/src/_includes/brand-adblock-warning.html +++ b/src/_includes/brand-adblock-warning.html @@ -1,4 +1,4 @@ -

Warning!

+

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be diff --git a/src/_includes/community/requesting-new-icons.html b/src/_includes/community/requesting-new-icons.html index e342f2868..2d8433488 100644 --- a/src/_includes/community/requesting-new-icons.html +++ b/src/_includes/community/requesting-new-icons.html @@ -23,7 +23,7 @@
  • - Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face. + Request concrete objects: it's harder to make an icon to represent happiness, it's easier to make a smiley face.
    • diff --git a/src/_includes/examples/accessible.html b/src/_includes/examples/accessible.html index 588469e7d..528078eb6 100644 --- a/src/_includes/examples/accessible.html +++ b/src/_includes/examples/accessible.html @@ -6,21 +6,27 @@

    - + + Settings - + + Delete - + + Skip to main navigation

    - - + + Reloading… + + + Saving. Hang tight!

    @@ -42,7 +48,8 @@

    - Battery Remaining: 50%; + + Battery Remaining: 50%;

    @@ -52,21 +59,27 @@ {% highlight html %} - + + Settings - + + Delete - + + Skip to main navigation {% endhighlight %} {% highlight html %} - - + +Reloading… + + +Saving. Hang tight! {% endhighlight %} {% highlight html %} diff --git a/src/_includes/examples/animated.html b/src/_includes/examples/animated.html index a5f61ca5c..698211b6b 100644 --- a/src/_includes/examples/animated.html +++ b/src/_includes/examples/animated.html @@ -9,11 +9,11 @@

    - - - - - + + + + +

    @@ -29,13 +29,13 @@ {% endhighlight %}

    - - Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See - issue #671 + Note: + Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See + issue #671 for examples and possible workarounds.

    - CSS3 animations aren't supported in IE8 - IE9. + Note: CSS3 animations aren't supported in IE8 - IE9.

    diff --git a/src/_includes/examples/basic.html b/src/_includes/examples/basic.html index d672ffd57..4a877cfca 100644 --- a/src/_includes/examples/basic.html +++ b/src/_includes/examples/basic.html @@ -10,7 +10,8 @@

    - fa-camera-retro + + Example: basic icon

    @@ -25,7 +26,8 @@
    diff --git a/src/_includes/icons/web-application.html b/src/_includes/icons/web-application.html index f71ec17a6..6e737e6cd 100644 --- a/src/_includes/icons/web-application.html +++ b/src/_includes/icons/web-application.html @@ -5,7 +5,7 @@ {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %} {% for icon in icons_web_application %} -
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    +
    Example of {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% endfor %}
    diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html index 6767780b3..8d0dbf388 100644 --- a/src/_includes/jumbotron-carousel.html +++ b/src/_includes/jumbotron-carousel.html @@ -7,7 +7,7 @@
    -   +   Download
    @@ -24,27 +24,31 @@
    diff --git a/src/_includes/modals/download.html b/src/_includes/modals/download.html index 0b8c77958..a7105e69b 100644 --- a/src/_includes/modals/download.html +++ b/src/_includes/modals/download.html @@ -3,9 +3,9 @@
    - +
    diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 4e81f3f22..b115e9987 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -34,10 +34,10 @@
    - Font Awesome + Font Awesome
    @@ -53,33 +53,35 @@
  • Icons
  • - + +
  • Examples
  • - + +
    • Examples
      • diff --git a/src/_includes/new-features.html b/src/_includes/new-features.html index 2400e375b..e8d46f1c1 100644 --- a/src/_includes/new-features.html +++ b/src/_includes/new-features.html @@ -2,27 +2,27 @@
      -

      Completely Rewritten

      +

      Completely Rewritten

      Everything re-written from the ground up for speed and simplicity.
      -

      CSS Best Practices

      +

      CSS Best Practices

      New icon base class allows simpler CSS, faster rendering, and easier control.
      -

      New Icon Names

      +

      New Icon Names

      Icons have been renamed to improve consistency and predictability.
      -

      Bootstrap 3

      +

      Bootstrap 3

      Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3.
      -

      Better Compatibility

      +

      Better Compatibility

      Font Awesome is now more compatible with all web frameworks, including Foundation.
      -

      {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}

      +

      {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}

      Requested by the active community on the Font Awesome GitHub project.
      diff --git a/src/_includes/new-naming.html b/src/_includes/new-naming.html index a1d574dbf..9777649a6 100644 --- a/src/_includes/new-naming.html +++ b/src/_includes/new-naming.html @@ -12,15 +12,15 @@

      Solid icons as the base variant

      • - + fa-bookmark
      • - + fa-comment
      • - + fa-folder
      @@ -30,15 +30,15 @@

      Outlined version of previous modifier

      • - + fa-bookmark-o
      • - + fa-comment-o
      • - + fa-folder-o
      @@ -48,15 +48,15 @@

      Circle under previous modifier

      • - + fa-check-circle
      • - + fa-exclamation-circle
      • - + fa-plus-circle
      @@ -66,15 +66,15 @@

      Square under previous modifier

      • - + fa-check-square
      • - + fa-twitter-square
      • - + fa-plus-square
      @@ -84,15 +84,15 @@

      Directional modifier always at the end

      • - + fa-arrow-right
      • - + fa-arrow-circle-right
      • - + fa-angle-double-right
      @@ -102,15 +102,15 @@

      Alternative to the original

      • - + fa-unlock-alt
      • - + fa-list-alt
      • - + fa-github-alt
      @@ -120,33 +120,33 @@

      Horizontal & vertical modifiers

      • - + fa-arrows-v
      • - + fa-arrows-h
      • - + fa-ellipsis-v
    • -

    Combine 'em up...

    +

    Combine 'em up&helip;

    Consistent when strung together

    • - + fa-arrow-circle-o-right
    • - + fa-caret-square-o-right
    • - + fa-hand-o-right
    diff --git a/src/_includes/stripe-social.html b/src/_includes/stripe-social.html index d4b39270d..9529bbd96 100644 --- a/src/_includes/stripe-social.html +++ b/src/_includes/stripe-social.html @@ -11,7 +11,7 @@
    diff --git a/src/_includes/tell-me-thanks.html b/src/_includes/tell-me-thanks.html index 679c884b2..19e4d502f 100644 --- a/src/_includes/tell-me-thanks.html +++ b/src/_includes/tell-me-thanks.html @@ -6,7 +6,7 @@

    -

    Tip me on Gittip

    +

    Tip me on Gittip

    Gittip is a great way to let developers know you appreciate their work.

    diff --git a/src/_includes/tests/rotated-flipped-inside-anchor.html b/src/_includes/tests/rotated-flipped-inside-anchor.html index 111f1a37a..2c48c0ef4 100644 --- a/src/_includes/tests/rotated-flipped-inside-anchor.html +++ b/src/_includes/tests/rotated-flipped-inside-anchor.html @@ -1,6 +1,6 @@ -  normal
    -  fa-rotate-90
    -  fa-rotate-180
    -  fa-rotate-270
    -  fa-flip-horizontal
    -  fa-flip-vertical +  normal
    +  fa-rotate-90
    +  fa-rotate-180
    +  fa-rotate-270
    +  fa-flip-horizontal
    +  fa-flip-vertical diff --git a/src/_includes/tests/rotated-flipped-inside-btn.html b/src/_includes/tests/rotated-flipped-inside-btn.html index fc0d78829..9399fc311 100644 --- a/src/_includes/tests/rotated-flipped-inside-btn.html +++ b/src/_includes/tests/rotated-flipped-inside-btn.html @@ -1,6 +1,6 @@ -  normal
    -  fa-rotate-90
    -  fa-rotate-180
    -  fa-rotate-270
    -  fa-flip-horizontal
    -  fa-flip-vertical +  normal
    +  fa-rotate-90
    +  fa-rotate-180
    +  fa-rotate-270
    +  fa-flip-horizontal
    +  fa-flip-vertical diff --git a/src/_includes/tests/rotated-flipped.html b/src/_includes/tests/rotated-flipped.html index 13a83f4b6..7f12a77ef 100644 --- a/src/_includes/tests/rotated-flipped.html +++ b/src/_includes/tests/rotated-flipped.html @@ -1,6 +1,6 @@ -  normal
    -  fa-rotate-90
    -  fa-rotate-180
    -  fa-rotate-270
    -  fa-flip-horizontal
    -  fa-flip-vertical +  normal
    +  fa-rotate-90
    +  fa-rotate-180
    +  fa-rotate-270
    +  fa-flip-horizontal
    +  fa-flip-vertical diff --git a/src/_includes/tests/stacked-inside-anchor.html b/src/_includes/tests/stacked-inside-anchor.html index c62dfbb73..04a6b31d2 100644 --- a/src/_includes/tests/stacked-inside-anchor.html +++ b/src/_includes/tests/stacked-inside-anchor.html @@ -1,20 +1,20 @@

    - + Twitter Icon - + Facebook Icon - + @@ -23,21 +23,21 @@

    - + Twitter Icon - + Facebook Icon - + @@ -46,24 +46,24 @@

    - + Twitter Icon - + Facebook Icon - + GitHub Icon -

    \ No newline at end of file +

    diff --git a/src/_includes/tests/stacked-with-text.html b/src/_includes/tests/stacked-with-text.html index 6dd9ea81b..28a7500c8 100644 --- a/src/_includes/tests/stacked-with-text.html +++ b/src/_includes/tests/stacked-with-text.html @@ -1,4 +1,4 @@ - + diff --git a/src/_includes/tests/stacked.html b/src/_includes/tests/stacked.html index 83ff20599..4d0040759 100644 --- a/src/_includes/tests/stacked.html +++ b/src/_includes/tests/stacked.html @@ -1,56 +1,56 @@ - +
    Center

    - + Twitter Icon - + Facebook Icon - + GitHub Icon

    - + Twitter Icon - + Facebook Icon - + GitHub Icon

    - + Twitter Icon - + Facebook Icon - + diff --git a/src/_includes/thanks-to.html b/src/_includes/thanks-to.html index aebcb3d47..e48a65f06 100644 --- a/src/_includes/thanks-to.html +++ b/src/_includes/thanks-to.html @@ -17,7 +17,7 @@

    - Thanks to  MaxCDN for providing the excellent + Thanks to MaxCDN for providing the excellent BootstrapCDN, the fastest and easiest way to get started with Font Awesome.

    diff --git a/src/_includes/why.html b/src/_includes/why.html index 499829384..663bdd01d 100644 --- a/src/_includes/why.html +++ b/src/_includes/why.html @@ -1,40 +1,40 @@
    -

    One Font, {{ icons | size }} Icons

    +

    One Font, {{ icons | size }} Icons

    In a single collection, Font Awesome is a pictographic language of web-related actions.
    -

    No JavaScript Required

    +

    No JavaScript Required

    Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
    -

    Infinite Scalability

    +

    Infinite Scalability

    Scalable vector graphics means every icon looks awesome at any size.
    -

    Free, as in Speech

    +

    Free, as in Speech

    Font Awesome is completely free for commercial use. Check out the license.
    -

    CSS Control

    +

    CSS Control

    Easily style icon color, size, shadow, and anything that's possible with CSS.
    -

    Perfect on Retina Displays

    +

    Perfect on Retina Displays

    Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
    -

    Plays Well with Others

    +

    Plays Well with Others

    Originally designed for Bootstrap, Font Awesome works great with all frameworks.
    -

    Desktop Friendly

    +

    Desktop Friendly

    To use on the desktop or for a complete set of vectors, check out the cheatsheet.
    -

    Screen Reader Compatible

    +

    Screen Reader Compatible

    Font Awesome won't trip up screen readers, unlike other icon fonts.