From c5a0e918a452e64b2ebbcaa33ff60d03c5b3530a Mon Sep 17 00:00:00 2001 From: davegandy Date: Sun, 20 Oct 2013 19:12:13 -0400 Subject: [PATCH] doc changes to match new default icon class fa --- _config.yml | 2 +- less/variables.less | 2 +- scss/_variables.scss | 2 +- .../community/requesting-new-icons.html | 2 +- src/_includes/examples/animated-spinner.html | 16 +- src/_includes/examples/bordered-pulled.html | 10 +- src/_includes/examples/button-dropdowns.html | 22 +- src/_includes/examples/button-groups.html | 16 +- src/_includes/examples/buttons.html | 34 +- src/_includes/examples/form-inputs.html | 8 +- src/_includes/examples/inline-icons.html | 6 +- src/_includes/examples/larger-icons.html | 26 +- src/_includes/examples/list-bullets.html | 30 +- src/_includes/examples/navigation.html | 16 +- src/_includes/examples/new.html | 54 +-- src/_includes/examples/rotated-flipped.html | 26 +- src/_includes/examples/stacked.html | 68 +-- src/_includes/footer.html | 4 +- src/_includes/icons/brand.html | 2 +- src/_includes/icons/currency.html | 2 +- src/_includes/icons/directional.html | 2 +- src/_includes/icons/medical.html | 2 +- src/_includes/icons/new.html | 2 +- src/_includes/icons/text-editor.html | 2 +- src/_includes/icons/video-player.html | 2 +- src/_includes/icons/web-application.html | 2 +- src/_includes/jumbotron-carousel.html | 30 +- src/_includes/navbar.html | 36 +- src/_includes/new-features.html | 12 +- src/_includes/new-naming.html | 88 ++-- .../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 | 54 +-- src/_includes/tests/stacked.html | 54 +-- src/_includes/thanks-to.html | 2 +- src/_includes/why.html | 16 +- src/_layouts/icon.html | 24 +- src/assets/font-awesome/less/variables.less | 2 +- src/assets/font-awesome/scss/_variables.scss | 2 +- src/assets/less/site/bootstrap/jumbotron.less | 12 +- src/assets/less/site/bootstrap/navbar.less | 2 +- src/assets/less/site/feature-list.less | 2 +- .../less/site/fontawesome-icon-list.less | 4 +- .../less/site/responsive/screen-xs.less | 4 +- src/cheatsheet.html | 6 +- src/community.html | 2 +- src/examples.html | 2 +- src/get-started.html | 4 +- src/icons.html | 2 +- src/license.html | 6 +- src/test.html | 392 +++++++++--------- src/whats-new.html | 2 +- 53 files changed, 578 insertions(+), 578 deletions(-) diff --git a/_config.yml b/_config.yml index 81d5c933e..1f6d1b4a0 100644 --- a/_config.yml +++ b/_config.yml @@ -26,7 +26,7 @@ fontawesome: blog_url: http://blog.fontawesome.io twitter: fontawesome tagline: The iconic font designed for Bootstrap - css_prefix: fa-icon + css_prefix: fa author: name: Dave Gandy email: dave@fontawesome.io diff --git a/less/variables.less b/less/variables.less index 3c13c4e81..c663afac8 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,9 +1,9 @@ // Variables // -------------------------- -@fa-css-prefix: fa-icon; @fa-font-path: "../fonts"; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly +@fa-css-prefix: fa; @fa-version: "4.0.0"; @fa-border-color: #eee; @fa-icon-muted: #eee; diff --git a/scss/_variables.scss b/scss/_variables.scss index f14f5979e..d46645335 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,9 +1,9 @@ // Variables // -------------------------- -$fa-css-prefix: fa; $fa-font-path: "../fonts" !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font" !default; // for referencing Bootstrap CDN font files directly +$fa-css-prefix: fa; $fa-version: "4.0.0" !default; $fa-border-color: #eee !default; $fa-icon-muted: #eee !default; diff --git a/src/_includes/community/requesting-new-icons.html b/src/_includes/community/requesting-new-icons.html index a59b7b185..1b723dea5 100644 --- a/src/_includes/community/requesting-new-icons.html +++ b/src/_includes/community/requesting-new-icons.html @@ -21,7 +21,7 @@
  • Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon - to represent happiness. It's easier to make a smiley face. + to represent happiness. It's easier to make a smiley face.
  • diff --git a/src/_includes/examples/animated-spinner.html b/src/_includes/examples/animated-spinner.html index a40b1f58e..f83debab6 100644 --- a/src/_includes/examples/animated-spinner.html +++ b/src/_includes/examples/animated-spinner.html @@ -3,24 +3,24 @@

    - Use the fa-icon-spin class to get any icon to rotate. Works well with fa-icon-spinner, - fa-icon-refresh, and fa-icon-cog. + Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, + fa-refresh, and fa-cog.

    - - - + + +

    - Spinner icon when loading content... + Spinner icon when loading content...
    {% highlight html %} - Spinner icon when loading content... + Spinner icon when loading content... {% endhighlight %}

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

    diff --git a/src/_includes/examples/bordered-pulled.html b/src/_includes/examples/bordered-pulled.html index a85a8871b..2439cdb99 100644 --- a/src/_includes/examples/bordered-pulled.html +++ b/src/_includes/examples/bordered-pulled.html @@ -3,29 +3,29 @@

    - Use fa-icon-border and pull-right or pull-left for easy pull quotes or + Use fa-border and pull-right or pull-left for easy pull quotes or article graphics.

    - + Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
    {% highlight html %} - + Use a few of the new styles together ... lots of new possibilities. {% endhighlight %}
    - + Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
    {% highlight html %} - + Use a few of the new styles together ... lots of new possibilities. {% endhighlight %}
    diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html index 3d0429b6d..384ff27a1 100644 --- a/src/_includes/examples/button-dropdowns.html +++ b/src/_includes/examples/button-dropdowns.html @@ -3,13 +3,13 @@
    - User + User - + @@ -18,19 +18,19 @@
    {% highlight html %} {% endhighlight %} -
    Don't forget to add the appropriate JavaScript to enable button dropdowns.
    +
    Don't forget to add the appropriate JavaScript to enable button dropdowns.
    diff --git a/src/_includes/examples/button-groups.html b/src/_includes/examples/button-groups.html index 955502466..83b8475be 100644 --- a/src/_includes/examples/button-groups.html +++ b/src/_includes/examples/button-groups.html @@ -4,20 +4,20 @@

    - - - - + + + +

    {% highlight html %}
    - - - - + + + +
    {% endhighlight %}
    diff --git a/src/_includes/examples/buttons.html b/src/_includes/examples/buttons.html index d5325d65e..eff83d423 100644 --- a/src/_includes/examples/buttons.html +++ b/src/_includes/examples/buttons.html @@ -4,53 +4,53 @@

    - Reload + Reload - Checkout + Checkout

    - Comment + Comment - Info + Info

    - Delete + Delete - Settings + Settings

    - Font Awesome
    Version {{ site.fontawesome.version }}
    + Font Awesome
    Version {{ site.fontawesome.version }}

    - Synchronizing Content... + Synchronizing Content...

    Font Awesome icons work great in buttons. You can even combine them with larger icon styles, - pull-right and pull-left, and fa-icon-spin. + pull-right and pull-left, and fa-spin.

    {% highlight html %} - Reload + Reload - Checkout + Checkout - Comment + Comment - Info + Info - Delete + Delete - Settings + Settings - Font Awesome
    Version {{ site.fontawesome.version }}
    + Font Awesome
    Version {{ site.fontawesome.version }} - Synchronizing Content... + Synchronizing Content... {% endhighlight %}
    diff --git a/src/_includes/examples/form-inputs.html b/src/_includes/examples/form-inputs.html index 0b2556bac..e2b073d28 100644 --- a/src/_includes/examples/form-inputs.html +++ b/src/_includes/examples/form-inputs.html @@ -3,12 +3,12 @@
    - +

    - +
    @@ -16,11 +16,11 @@ {% highlight html %}
    - +
    - +
    diff --git a/src/_includes/examples/inline-icons.html b/src/_includes/examples/inline-icons.html index d5fc45421..8324d0af6 100644 --- a/src/_includes/examples/inline-icons.html +++ b/src/_includes/examples/inline-icons.html @@ -7,13 +7,13 @@
    - icon-camera-retro + icon-camera-retro
    {% highlight html %} - icon-camera-retro + icon-camera-retro {% endhighlight %} -
    Icon classes are echoed via CSS :before.
    +
    Icon classes are echoed via CSS :before.
    diff --git a/src/_includes/examples/larger-icons.html b/src/_includes/examples/larger-icons.html index 91aadf58b..9f2834e74 100644 --- a/src/_includes/examples/larger-icons.html +++ b/src/_includes/examples/larger-icons.html @@ -3,31 +3,31 @@

    - To increase the size of icons relative to its container, use fa-icon-lg, fa-icon-2x, - fa-icon-3x, or fa-icon-4x. + To increase the size of icons relative to its container, use fa-lg, fa-2x, + fa-3x, or fa-4x.

    - Increase the icon size by using the fa-icon-lg (33% increase), fa-icon-2x, - fa-icon-3x, or fa-icon-4x classes. + Increase the icon size by using the fa-lg (33% increase), fa-2x, + fa-3x, or fa-4x classes.

    -

    fa-icon-camera-retro

    -

    fa-icon-camera-retro

    -

    fa-icon-camera-retro

    -

    fa-icon-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    {% highlight html %} -

    fa-icon-camera-retro

    -

    fa-icon-camera-retro

    -

    fa-icon-camera-retro

    -

    fa-icon-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    {% endhighlight %}
    - If your icons are getting chopped off on top and bottom, make sure you have + If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
    diff --git a/src/_includes/examples/list-bullets.html b/src/_includes/examples/list-bullets.html index c2cfb321b..8f5c8dda9 100644 --- a/src/_includes/examples/list-bullets.html +++ b/src/_includes/examples/list-bullets.html @@ -2,28 +2,28 @@
    -
      -
    • List bullets (like these)
    • -
    • Buttons
    • -
    • Button groups
    • -
    • Navigation
    • -
    • Prepended form inputs
    • -
    • …and many more with custom CSS
    • +
        +
      • List bullets (like these)
      • +
      • Buttons
      • +
      • Button groups
      • +
      • Navigation
      • +
      • Prepended form inputs
      • +
      • …and many more with custom CSS

    Easily replace individual list bullets.

    {% highlight html %} -
      -
    • Bulleted lists (like this one)
    • -
    • Buttons
    • -
    • Button groups
    • -
    • Navigation
    • -
    • Prepended form inputs
    • -
    • …and many more with custom CSS
    • +
        +
      • Bulleted lists (like this one)
      • +
      • Buttons
      • +
      • Button groups
      • +
      • Navigation
      • +
      • Prepended form inputs
      • +
      • …and many more with custom CSS
      {% endhighlight %} -
      Make sure to NOT include any whitespace after the icon declaration.
      +
      Make sure to NOT include any whitespace after the icon declaration.
    diff --git a/src/_includes/examples/navigation.html b/src/_includes/examples/navigation.html index 6a4c70720..360da1f54 100644 --- a/src/_includes/examples/navigation.html +++ b/src/_includes/examples/navigation.html @@ -3,20 +3,20 @@

    Use Font Awesome icons in navigation to provide helpful visual cues.

    {% highlight html %} {% endhighlight %}
    diff --git a/src/_includes/examples/new.html b/src/_includes/examples/new.html index c0c4b29b7..34570fa26 100644 --- a/src/_includes/examples/new.html +++ b/src/_includes/examples/new.html @@ -4,49 +4,49 @@

    Rotated and Flipped Icons

    -   normal
    -   fa-icon-rotate-90
    -   fa-icon-rotate-180
    -   fa-icon-rotate-270
    -   fa-icon-flip-horizontal
    -   fa-icon-flip-vertical +   normal
    +   fa-rotate-90
    +   fa-rotate-180
    +   fa-rotate-270
    +   fa-flip-horizontal
    +   fa-flip-vertical

    Stacked Icons

    - - - + + + - fa-icon-twitter on fa-icon-unchecked
    - - - + fa-twitter on fa-unchecked
    + + + - fa-icon-flag on fa-icon-circle
    - - - + fa-flag on fa-circle
    + + + - fa-icon-terminal on fa-icon-square
    - - - + fa-terminal on fa-square
    + + + - fa-icon-camera on fa-icon-ban + fa-camera on fa-ban

    Better Bulleted Lists

    -
      -
    • New bulleted lists
    • -
    • Fix some old bugs
    • -
    • And deal with arbitrary
    • -
    • Font sizes better
    • +
        +
      • New bulleted lists
      • +
      • Fix some old bugs
      • +
      • And deal with arbitrary
      • +
      • Font sizes better
    diff --git a/src/_includes/examples/rotated-flipped.html b/src/_includes/examples/rotated-flipped.html index f7663f07c..33dd3591c 100644 --- a/src/_includes/examples/rotated-flipped.html +++ b/src/_includes/examples/rotated-flipped.html @@ -6,23 +6,23 @@
    -   normal
    -   fa-icon-rotate-90
    -   fa-icon-rotate-180
    -   fa-icon-rotate-270
    -   fa-icon-flip-horizontal
    -   fa-icon-flip-vertical +   normal
    +   fa-rotate-90
    +   fa-rotate-180
    +   fa-rotate-270
    +   fa-flip-horizontal
    +   fa-flip-vertical
    {% highlight html %} -  normal
    -  fa-icon-rotate-90
    -  fa-icon-rotate-180
    -  fa-icon-rotate-270
    -  fa-icon-flip-horizontal
    -  icon-flip-vertical +  normal
    +  fa-rotate-90
    +  fa-rotate-180
    +  fa-rotate-270
    +  fa-flip-horizontal
    +  icon-flip-vertical {% endhighlight %}

    - Rotating and flipping icons aren't yet supported in IE7. + Rotating and flipping icons aren't yet supported in IE7.

    diff --git a/src/_includes/examples/stacked.html b/src/_includes/examples/stacked.html index 11532ab1d..41fdb8420 100644 --- a/src/_includes/examples/stacked.html +++ b/src/_includes/examples/stacked.html @@ -2,53 +2,53 @@
    - A method for easily stacking multiple icons. Use the fa-icon-stack class on the parent and - fa-icon-stack-base for the bottom icon. + A method for easily stacking multiple icons. Use the fa-stack class on the parent and + fa-stack-base for the bottom icon.
    - - - + + + - fa-icon-twitter on fa-icon-unchecked
    - - - + fa-twitter on fa-unchecked
    + + + - fa-icon-flag on fa-icon-circle
    - - - + fa-flag on fa-circle
    + + + - fa-icon-terminal on fa-icon-square
    - - - + fa-terminal on fa-square
    + + + - fa-icon-camera on fa-icon-ban + fa-camera on fa-ban
    {% highlight html %} - - - + + + -fa-icon-twitter on fa-icon-unchecked
    - - - +fa-twitter on fa-unchecked
    + + + -fa-icon-flag on fa-icon-circle
    - - - +fa-flag on fa-circle
    + + + -fa-icon-terminal on fa-icon-sign-blank
    - - - +fa-terminal on fa-sign-blank
    + + + -fa-icon-camera on fa-icon-ban-circle +fa-camera on fa-ban-circle {% endhighlight %}
    diff --git a/src/_includes/footer.html b/src/_includes/footer.html index f100d94ca..522bb03d9 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.html @@ -1,7 +1,7 @@
    diff --git a/src/_includes/icons/directional.html b/src/_includes/icons/directional.html index 585e22438..eefa6d815 100644 --- a/src/_includes/icons/directional.html +++ b/src/_includes/icons/directional.html @@ -5,7 +5,7 @@ {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %} {% for icon in icons_directional %} - + {% endfor %}
    diff --git a/src/_includes/icons/medical.html b/src/_includes/icons/medical.html index ae7d97f16..b95849e5d 100644 --- a/src/_includes/icons/medical.html +++ b/src/_includes/icons/medical.html @@ -5,7 +5,7 @@ {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %} {% for icon in icons_medical %} -
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    +
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% endfor %} diff --git a/src/_includes/icons/new.html b/src/_includes/icons/new.html index 6f95a147c..2ec4934b8 100644 --- a/src/_includes/icons/new.html +++ b/src/_includes/icons/new.html @@ -11,7 +11,7 @@ {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %} {% for icon in icons_new %} -
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    +
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% endfor %} diff --git a/src/_includes/icons/text-editor.html b/src/_includes/icons/text-editor.html index 51737db2a..0af745ef5 100644 --- a/src/_includes/icons/text-editor.html +++ b/src/_includes/icons/text-editor.html @@ -5,7 +5,7 @@ {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %} {% for icon in icons_text_editor %} -
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    +
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% endfor %} diff --git a/src/_includes/icons/video-player.html b/src/_includes/icons/video-player.html index 6cb3343ff..1de5fb26b 100644 --- a/src/_includes/icons/video-player.html +++ b/src/_includes/icons/video-player.html @@ -5,7 +5,7 @@ {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %} {% for icon in icons_video_player %} -
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    +
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% endfor %} diff --git a/src/_includes/icons/web-application.html b/src/_includes/icons/web-application.html index 964ab9f4d..d25921f88 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 %}
    +
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% endfor %} diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html index 017271a16..c00b3188f 100644 --- a/src/_includes/jumbotron-carousel.html +++ b/src/_includes/jumbotron-carousel.html @@ -7,7 +7,7 @@
    -    +    Download
    @@ -23,26 +23,26 @@ diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 50cfb6a41..24920a8ef 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -7,35 +7,41 @@ - Font Awesome + Font Awesome @@ -304,23 +304,23 @@ relative_path: ../
    Button - Button - + Button +
    Button - Button - + Button +
    Button - Button - + Button +
    Button - Button - + Button +
    @@ -328,23 +328,23 @@ relative_path: ../
    Button - Button - + Button +
    Button - Button - + Button +
    Button - Button - + Button +
    Button - Button - + Button +
    @@ -356,7 +356,7 @@ relative_path: ../
    + Loading... + - Loading... - - Loading... + Loading... + + Loading...
    - Loading... - + Loading... + - Loading... - + Loading... +
    - Loading... - + Loading... + - Loading... - + Loading... +
    -

    fa-icon-lg

    +

    fa-lg

    - Loading... - + Loading... + - Loading... - + Loading... +
    - Loading... - + Loading... + - Loading... - + Loading... +
    - Loading... - + Loading... + - Loading... - + Loading... +

    Bootstrap Prepend and Append

    - +
    - +
    diff --git a/src/whats-new.html b/src/whats-new.html index b9af0edb1..d24486614 100644 --- a/src/whats-new.html +++ b/src/whats-new.html @@ -4,7 +4,7 @@ title: What's New navbar_active: whats-new relative_path: ../ --- -{% capture jumbotron_h1 %}  What's New{% endcapture %} +{% capture jumbotron_h1 %}  What's New{% endcapture %} {% capture jumbotron_p %}What's New in the latest version — Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %} {% include jumbotron.html %}