From e32be98c31c2d1987d6a1ad614838e4df79c1315 Mon Sep 17 00:00:00 2001 From: davegandy Date: Mon, 30 Sep 2013 22:07:49 -0400 Subject: [PATCH] updating docs to use new css prefix --- css/font-awesome.css | 19 +++--- css/font-awesome.min.css | 12 ++-- less/bootstrap.less | 6 +- less/core.less | 6 +- less/mixins.less | 3 +- .../community/requesting-new-icons.html | 2 +- src/_includes/examples/animated-spinner.html | 10 +-- src/_includes/examples/bordered-pulled.html | 10 +-- src/_includes/examples/bulleted-lists.html | 30 ++++---- 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/navigation.html | 16 ++--- src/_includes/examples/new.html | 46 ++++++------- src/_includes/examples/rotated-flipped.html | 26 +++---- src/_includes/examples/stacked.html | 68 +++++++++---------- src/_includes/footer.html | 4 +- src/_includes/get-started.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-slider.html | 30 ++++---- src/_includes/license.html | 4 +- src/_includes/navbar.html | 24 +++---- src/_includes/tell-me-thanks.html | 2 +- src/_includes/thanks-to.html | 2 +- src/_includes/whats-new.html | 12 ++-- src/_includes/why.html | 18 ++--- src/_layouts/icon.html | 24 +++---- src/assets/font-awesome/less/bootstrap.less | 6 +- src/assets/font-awesome/less/core.less | 6 +- src/assets/font-awesome/less/mixins.less | 9 +-- src/assets/less/responsive-767px-max.less | 4 +- src/assets/less/site.less | 50 +++++++------- src/community.html | 2 +- src/examples.html | 2 +- src/get-started.html | 2 +- src/icons.html | 2 +- src/license.html | 2 +- src/whats-new.html | 2 +- 48 files changed, 295 insertions(+), 298 deletions(-) diff --git a/css/font-awesome.css b/css/font-awesome.css index c4e6729fa..6c28be32b 100644 --- a/css/font-awesome.css +++ b/css/font-awesome.css @@ -50,7 +50,7 @@ speak: none; } /* makes the font 33% larger relative to the icon container */ -.fa-large:before { +.fa-lg:before { font-size: 1.3333333333333333em; vertical-align: -10%; } @@ -58,14 +58,14 @@ a .fa { display: inline; } -/* increased font size for icon-large */ +/* increased font size for icon-lg */ .fa.fa-fixed-width { display: inline-block; width: 1.1428571428571428em; padding-right: 0.2857142857142857em; text-align: right; } -.fa.fa-fixed-width.fa-large { +.fa.fa-fixed-width.fa-lg { width: 1.4285714285714286em; } .fa-ul { @@ -165,8 +165,8 @@ a .fa { background-repeat: repeat; } /* keeps Bootstrap styles with and without icons the same */ -.btn .fa.fa-large, -.nav .fa.fa-large { +.btn .fa.fa-lg, +.nav .fa.fa-lg { line-height: .9em; } .btn .fa.fa-spin, @@ -175,15 +175,15 @@ a .fa { } .nav-tabs .fa, .nav-pills .fa, -.nav-tabs .fa.fa-large, -.nav-pills .fa.fa-large { +.nav-tabs .fa.fa-lg, +.nav-pills .fa.fa-lg { line-height: .9em; } .btn .fa.pull-left.fa-2x, .btn .fa.pull-right.fa-2x { margin-top: .18em; } -.btn .fa.fa-spin.fa-large { +.btn .fa.fa-spin.fa-lg { line-height: .8em; } .btn.btn-small .fa.pull-left.fa-2x, @@ -218,8 +218,7 @@ a .fa { line-height: 2em; vertical-align: -35%; } -.fa-stack [class^="fa-"], -.fa-stack [class*=" fa-"] { +.fa-stack .fa { position: absolute; display: block; width: 100%; diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css index 0bb2e997e..fb34722fd 100644 --- a/css/font-awesome.min.css +++ b/css/font-awesome.min.css @@ -1,8 +1,8 @@ @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;} .fa:before{display:inline-block;text-decoration:inherit;speak:none;} -.fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;} +.fa-lg:before{font-size:1.3333333333333333em;vertical-align:-10%;} a .fa{display:inline;} -.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-large{width:1.4285714285714286em;} +.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;} .fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;} .fa.hide{display:none;} @@ -19,17 +19,17 @@ a .fa{display:inline;} .fa.pull-left{margin-right:.3em;} .fa.pull-right{margin-left:.3em;} .fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;} -.btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;} +.btn .fa.fa-lg,.nav .fa.fa-lg{line-height:.9em;} .btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;} -.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-large,.nav-pills .fa.fa-large{line-height:.9em;} +.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-lg,.nav-pills .fa.fa-lg{line-height:.9em;} .btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;} -.btn .fa.fa-spin.fa-large{line-height:.8em;} +.btn .fa.fa-spin.fa-lg{line-height:.8em;} .btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;} .btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;} .btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;} .btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;} .nav-list .fa{line-height:inherit;} -.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} +.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;} .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;} a .fa-stack,a .fa-spin{display:inline-block;text-decoration:none;} diff --git a/less/bootstrap.less b/less/bootstrap.less index 6115cda97..0099620c1 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -19,13 +19,13 @@ .btn, .nav { .fa { // display: inline; - &.fa-large { line-height: .9em; } + &.fa-lg { line-height: .9em; } &.fa-spin { display: inline-block; } } } .nav-tabs, .nav-pills { .fa { - &, &.fa-large { line-height: .9em; } + &, &.fa-lg { line-height: .9em; } } } .btn { @@ -33,7 +33,7 @@ &.pull-left, &.pull-right { &.fa-2x { margin-top: .18em; } } - &.fa-spin.fa-large { line-height: .8em; } + &.fa-spin.fa-lg { line-height: .8em; } } } .btn.btn-small { diff --git a/less/core.less b/less/core.less index e43a54a6d..15b0f2f1a 100644 --- a/less/core.less +++ b/less/core.less @@ -12,7 +12,7 @@ } /* makes the font 33% larger relative to the icon container */ -.fa-large:before { +.fa-lg:before { font-size: (4em / 3); vertical-align: -10%; } @@ -24,14 +24,14 @@ a { } } -/* increased font size for icon-large */ +/* increased font size for icon-lg */ .fa { &.fa-fixed-width { display: inline-block; width: (16em / 14); padding-right: (4em / 14); text-align: right; - &.fa-large { + &.fa-lg { width: (20em / 14); } } diff --git a/less/mixins.less b/less/mixins.less index 099aa3080..a20f4bd60 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -31,8 +31,7 @@ height: @height; line-height: @width; vertical-align: -35%; - [class^="fa-"], - [class*=" fa-"] { + .fa { position: absolute; display: block; width: 100%; diff --git a/src/_includes/community/requesting-new-icons.html b/src/_includes/community/requesting-new-icons.html index d710e2bb1..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 eee013a11..0102e9b75 100644 --- a/src/_includes/examples/animated-spinner.html +++ b/src/_includes/examples/animated-spinner.html @@ -2,18 +2,18 @@

    Animated Spinner

    - Use the icon-spin class to get any icon to rotate. Works well with icon-spinner and - icon-refresh. + 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 IE7 - IE9. + CSS3 animations aren't supported in IE7 - IE9.

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

    - Use 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/bulleted-lists.html b/src/_includes/examples/bulleted-lists.html index 73db34e47..1f048e478 100644 --- a/src/_includes/examples/bulleted-lists.html +++ b/src/_includes/examples/bulleted-lists.html @@ -4,28 +4,28 @@
    -
      -
    • 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

    Easily replace individual 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/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html index 201eb1cd4..808fee30c 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 %}
    - User + User - +
    {% 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 ce4892309..b425746bd 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 b8d147c07..bd1ea4ca7 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 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 dcb39a8f2..95a88b90a 100644 --- a/src/_includes/examples/form-inputs.html +++ b/src/_includes/examples/form-inputs.html @@ -4,11 +4,11 @@
    - +
    - +
    @@ -17,11 +17,11 @@ {% highlight html %}
    - +
    - +
    diff --git a/src/_includes/examples/inline-icons.html b/src/_includes/examples/inline-icons.html index 3965e7c2a..4aa9f519d 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 95f1ee13b..7338bce64 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 icon-large, icon-2x, - icon-3x, or 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 icon-large (33% increase), icon-2x, - icon-3x, or icon-4x classes. + Increase the icon size by using the fa-lg (33% increase), fa-2x, + fa-3x, or fa-4x classes.

    -

    icon-camera-retro

    -

    icon-camera-retro

    -

    icon-camera-retro

    -

    icon-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    +

    fa-camera-retro

    {% highlight html %} -

    icon-camera-retro

    -

    icon-camera-retro

    -

    icon-camera-retro

    -

    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/navigation.html b/src/_includes/examples/navigation.html index 850e64442..118564938 100644 --- a/src/_includes/examples/navigation.html +++ b/src/_includes/examples/navigation.html @@ -4,10 +4,10 @@
    @@ -15,10 +15,10 @@

    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 8393f7d36..06201c599 100644 --- a/src/_includes/examples/new.html +++ b/src/_includes/examples/new.html @@ -4,42 +4,42 @@

    Rotated and Flipped Icons

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

    Stacked Icons

    - - - + + + - icon-twitter on icon-check-empty
    - - - + fa-twitter on fa-check-empty
    + + + - icon-flag on icon-circle
    - - - + fa-flag on fa-circle
    + + + - icon-terminal on icon-sign-blank + fa-terminal on fa-sign-blank

    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 cf061cd59..9eb051432 100644 --- a/src/_includes/examples/rotated-flipped.html +++ b/src/_includes/examples/rotated-flipped.html @@ -6,23 +6,23 @@
    -   normal
    -   icon-rotate-90
    -   icon-rotate-180
    -   icon-rotate-270
    -   icon-flip-horizontal
    -   icon-flip-vertical +   normal
    +   fa-rotate-90
    +   fa-rotate-180
    +   fa-rotate-270
    +   fa-flip-horizontal
    +   fa-flip-vertical
    {% highlight html %} -  normal
    -  icon-rotate-90
    -  icon-rotate-180
    -  icon-rotate-270
    -  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 3e7240c12..758384116 100644 --- a/src/_includes/examples/stacked.html +++ b/src/_includes/examples/stacked.html @@ -2,53 +2,53 @@

    Stacked Icons

    - A method for easily stacking multiple icons. Use the icon-stack class on the parent and - 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.
    - - - + + + - icon-twitter on icon-check-empty
    - - - + fa-twitter on fa-check-empty
    + + + - icon-flag on icon-circle
    - - - + fa-flag on fa-circle
    + + + - icon-terminal on icon-sign-blank
    - - - + fa-terminal on fa-sign-blank
    + + + - icon-camera on icon-ban-circle + fa-camera on fa-ban-circle
    {% highlight html %} - - - + + + -icon-twitter on icon-check-empty
    - - - +fa-twitter on fa-check-empty
    + + + -icon-flag on icon-circle
    - - - +fa-flag on fa-circle
    + + + -icon-terminal on icon-sign-blank
    - - - +fa-terminal on fa-sign-blank
    + + + -icon-camera on icon-ban-circle +fa-camera on fa-ban-circle {% endhighlight %}
    diff --git a/src/_includes/footer.html b/src/_includes/footer.html index 186b1524d..e8d44bd77 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.html @@ -1,7 +1,7 @@