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 %}
    - 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 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

    -
      -
    • 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 @@

    Stacked Icons

    - 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 %} -
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    +
    {{ icon.class }}{% if icon.alias_of %} (alias){% endif %}
    {% 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
    diff --git a/src/_includes/new-features.html b/src/_includes/new-features.html index f4cb00f87..813ed14a5 100644 --- a/src/_includes/new-features.html +++ b/src/_includes/new-features.html @@ -10,27 +10,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 4a69ba6f3..2e16c6c86 100644 --- a/src/_includes/new-naming.html +++ b/src/_includes/new-naming.html @@ -1,6 +1,6 @@

    New Naming Conventions in {{ site.fontawesome.minor_version }}

    -

    fa-icon-[name]-[shape]-[alt]-[direction]

    +

    fa-[name]-[shape]-[alt]-[direction]

    A desire for better icon naming consistency and predictability are at the heart of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict @@ -8,110 +8,110 @@

    -

    fa-icon-*

    +

    fa-*

    Solid icons as the base variant

    -
      +
      • - - fa-icon-bookmark + + fa-bookmark
      • - - fa-icon-comment + + fa-comment
      • - - fa-icon-folder + + fa-folder

    *-alt

    Outlined version of previous modifier

    -
      +
      • - - fa-icon-bookmark-alt + + fa-bookmark-alt
      • - - fa-icon-comment-alt + + fa-comment-alt
      • - - fa-icon-folder-alt + + fa-folder-alt

    *-circle

    Circle under previous modifier

    -
      +
      • - - fa-icon-check-circle + + fa-check-circle
      • - - fa-icon-exclamation-circle + + fa-exclamation-circle
      • - - fa-icon-plus-circle + + fa-plus-circle

    *-square

    Square under previous modifier

    -
      +
      • - - fa-icon-check-square + + fa-check-square
      • - - fa-icon-twitter-square + + fa-twitter-square
      • - - fa-icon-plus-square + + fa-plus-square

    *-right, *-up, etc.

    Directional modifier always at the end

    -
      +
      • - - fa-icon-arrow-right + + fa-arrow-right
      • - - fa-icon-arrow-circle-right + + fa-arrow-circle-right
      • - - fa-icon-angle-double-right + + fa-angle-double-right

    Combine 'em up...

    Consistent when strung together

    -
      +
      • - - fa-icon-arrow-circle-alt-right + + fa-arrow-circle-alt-right
      • - - fa-icon-caret-square-alt-right + + fa-caret-square-alt-right
      • - - fa-icon-hand-alt-right + + fa-hand-alt-right
    diff --git a/src/_includes/tests/rotated-flipped-inside-anchor.html b/src/_includes/tests/rotated-flipped-inside-anchor.html index 3dfc80fb1..111f1a37a 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-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 diff --git a/src/_includes/tests/rotated-flipped-inside-btn.html b/src/_includes/tests/rotated-flipped-inside-btn.html index 3c5f63b29..fc0d78829 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-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 diff --git a/src/_includes/tests/rotated-flipped.html b/src/_includes/tests/rotated-flipped.html index 4714941c8..13a83f4b6 100644 --- a/src/_includes/tests/rotated-flipped.html +++ b/src/_includes/tests/rotated-flipped.html @@ -1,6 +1,6 @@ -  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 diff --git a/src/_includes/tests/stacked-inside-anchor.html b/src/_includes/tests/stacked-inside-anchor.html index 94e51c2b6..d8f167f2c 100644 --- a/src/_includes/tests/stacked-inside-anchor.html +++ b/src/_includes/tests/stacked-inside-anchor.html @@ -1,68 +1,68 @@

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

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

    - - - + + + Twitter Icon - - - + + + Facebook Icon - - - + + + GitHub Icon diff --git a/src/_includes/tests/stacked.html b/src/_includes/tests/stacked.html index f699a3ee5..9eef6d5fa 100644 --- a/src/_includes/tests/stacked.html +++ b/src/_includes/tests/stacked.html @@ -1,51 +1,51 @@

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

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

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

    \ No newline at end of file diff --git a/src/_includes/thanks-to.html b/src/_includes/thanks-to.html index 1ebbb3b62..b442a62f8 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 c0e506f39..0a837c221 100644 --- a/src/_includes/why.html +++ b/src/_includes/why.html @@ -1,36 +1,36 @@
    -

    One Font, {{ icons | size }} Icons

    +

    One Font, {{ icons | size }} Icons

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

    CSS Control

    +

    CSS Control

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

    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.
    -

    Perfect on Retina Displays

    +

    Perfect on Retina Displays

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

    Made for Bootstrap

    +

    Made for Bootstrap

    Designed from scratch to be fully compatible with Bootstrap {{ site.bootstrap.version }}.
    -

    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.
    diff --git a/src/_layouts/icon.html b/src/_layouts/icon.html index f4e106b84..6e5bf21ca 100644 --- a/src/_layouts/icon.html +++ b/src/_layouts/icon.html @@ -6,19 +6,19 @@ relative_path: ../../
    -    +    -    -    -    -   +    +    +    +   - +

    - fa-icon-{{ page.icon.id }} + fa-{{ page.icon.id }} - · + · Unicode: {{ page.icon.unicode }} · Created: v{{ page.icon.created }} · Categories: @@ -29,7 +29,7 @@ relative_path: ../../ {% if icon_alias_count > 0 %} · Aliases: {% for alias in page.icon.aliases %} - fa-icon-{{ alias }}{% unless forloop.last %},{% endunless %} + fa-{{ alias }}{% unless forloop.last %},{% endunless %} {% endfor %} {% endif %} @@ -45,14 +45,14 @@ relative_path: ../../

    After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag:

    - fa-icon-{{ page.icon.id }} + fa-{{ page.icon.id }}
    {% highlight html %} - fa-icon-{{ page.icon.id }} + fa-{{ page.icon.id }} {% endhighlight %}
    -
    Looking for more? Check out the examples.
    +
    Looking for more? Check out the examples.

    {% include ads/carbon-light-vertical.html %}
    diff --git a/src/assets/font-awesome/less/variables.less b/src/assets/font-awesome/less/variables.less index 91b148d89..cca967804 100644 --- a/src/assets/font-awesome/less/variables.less +++ b/src/assets/font-awesome/less/variables.less @@ -3,9 +3,9 @@ // Variables // -------------------------- -@fa-css-prefix: {{ site.fontawesome.css_prefix }}; @fa-font-path: "../fonts"; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly +@fa-css-prefix: {{ site.fontawesome.css_prefix }}; @fa-version: "{{ site.fontawesome.version }}"; @fa-border-color: #eee; @fa-icon-muted: #eee; diff --git a/src/assets/font-awesome/scss/_variables.scss b/src/assets/font-awesome/scss/_variables.scss index 2c173329b..628859b3e 100644 --- a/src/assets/font-awesome/scss/_variables.scss +++ b/src/assets/font-awesome/scss/_variables.scss @@ -3,9 +3,9 @@ // Variables // -------------------------- -$fa-css-prefix: {{ site.fontawesome.css_prefix }}; $fa-font-path: "../fonts" !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font" !default; // for referencing Bootstrap CDN font files directly +$fa-css-prefix: {{ site.fontawesome.css_prefix }}; $fa-version: "{{ site.fontawesome.version }}" !default; $fa-border-color: #eee !default; $fa-icon-muted: #eee !default; diff --git a/src/assets/less/site/bootstrap/jumbotron.less b/src/assets/less/site/bootstrap/jumbotron.less index 0799b28fe..2cf28bb50 100644 --- a/src/assets/less/site/bootstrap/jumbotron.less +++ b/src/assets/less/site/bootstrap/jumbotron.less @@ -58,11 +58,11 @@ dd { margin-left: @component-offset-horizontal - 85; } } } - .fa-icon-2 { font-size: 2em; } - .fa-icon-3 { font-size: 4em; } - .fa-icon-4 { font-size: 7em; } - .fa-icon-5 { font-size: 12em; } - .fa-icon-6 { font-size: 20em; } + .fa-2 { font-size: 2em; } + .fa-3 { font-size: 4em; } + .fa-4 { font-size: 7em; } + .fa-5 { font-size: 12em; } + .fa-6 { font-size: 20em; } - .fa-icon-1, .fa-icon-2, .fa-icon-3, .fa-icon-4, .fa-icon-5, .fa-icon-6 { margin-right: 1/14em; } + .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; } } diff --git a/src/assets/less/site/bootstrap/navbar.less b/src/assets/less/site/bootstrap/navbar.less index 4e0104bc0..40db1ddf0 100644 --- a/src/assets/less/site/bootstrap/navbar.less +++ b/src/assets/less/site/bootstrap/navbar.less @@ -6,7 +6,7 @@ font-family: @font-family-serif; font-weight: 300; font-size: 20px; - .fa-icon-flag { padding-right: 3px; } + .fa-flag { padding-right: 3px; } } .navbar-nav > li > a { padding: 11px 10px 9px; } diff --git a/src/assets/less/site/feature-list.less b/src/assets/less/site/feature-list.less index f1f77ab9f..e8d4fefc7 100644 --- a/src/assets/less/site/feature-list.less +++ b/src/assets/less/site/feature-list.less @@ -1,7 +1,7 @@ .feature-list { .col-md-4 { margin-bottom: 22px; } h4 { - .fa-icon:before { + .fa:before { vertical-align: -10%; font-size: 28px; display: inline-block; diff --git a/src/assets/less/site/fontawesome-icon-list.less b/src/assets/less/site/fontawesome-icon-list.less index 27c3471ae..adc4f6f99 100644 --- a/src/assets/less/site/fontawesome-icon-list.less +++ b/src/assets/less/site/fontawesome-icon-list.less @@ -9,7 +9,7 @@ padding-left: 10px; border-radius: @border-radius-base; - .fa-icon { + .fa { width: 32px; font-size: 14px; display: inline-block; @@ -21,7 +21,7 @@ background-color: @fa-green; color: @jumbotron-color; text-decoration: none; - .fa-icon { + .fa { font-size: 28px; vertical-align: -6px; } diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less index fa692b461..df6d92667 100644 --- a/src/assets/less/site/responsive/screen-xs.less +++ b/src/assets/less/site/responsive/screen-xs.less @@ -34,8 +34,8 @@ } .jumbotron-icon { - .fa-icon-1, .fa-icon-2, .fa-icon-3, .fa-icon-4, .fa-icon-5, .fa-icon-6 { margin-right: 0; } - .fa-icon-6 { font-size: 16em; } + .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; } + .fa-6 { font-size: 16em; } h1 small { display: block; margin-top: 15px; diff --git a/src/cheatsheet.html b/src/cheatsheet.html index f6629f4ab..c0f634bd8 100644 --- a/src/cheatsheet.html +++ b/src/cheatsheet.html @@ -3,7 +3,7 @@ layout: base title: Font Awesome Cheatsheet relative_path: ../ --- -{% capture jumbotron_h1 %}  Cheatsheet{% endcapture %} +{% capture jumbotron_h1 %}  Cheatsheet{% endcapture %} {% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %} {% include jumbotron.html %} @@ -23,8 +23,8 @@ relative_path: ../
    {% for icon in icons %}
    - &#x{{ icon.unicode }} - fa-icon-{{ icon.id }} + &#x{{ icon.unicode }} + fa-{{ icon.id }} (&#x{{ icon.unicode }};)
    {% endfor %} diff --git a/src/community.html b/src/community.html index 0ef1e0060..abc8c3520 100644 --- a/src/community.html +++ b/src/community.html @@ -4,7 +4,7 @@ title: The Font Awesome Community navbar_active: community relative_path: ../ --- -{% capture jumbotron_h1 %}  Community{% endcapture %} +{% capture jumbotron_h1 %}  Community{% endcapture %} {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %} {% include jumbotron.html %} diff --git a/src/examples.html b/src/examples.html index ac88af582..41f2e8235 100644 --- a/src/examples.html +++ b/src/examples.html @@ -4,7 +4,7 @@ title: Font Awesome Examples navbar_active: examples relative_path: ../ --- -{% capture jumbotron_h1 %}  Examples{% endcapture %} +{% capture jumbotron_h1 %}  Examples{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% include jumbotron.html %} diff --git a/src/get-started.html b/src/get-started.html index dfabce08b..0f168c62b 100644 --- a/src/get-started.html +++ b/src/get-started.html @@ -4,7 +4,7 @@ title: Get Started with Font Awesome navbar_active: get-started relative_path: ../ --- -{% capture jumbotron_h1 %}  Get Started{% endcapture %} +{% capture jumbotron_h1 %}  Get Started{% endcapture %} {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %} {% include jumbotron.html %} @@ -93,7 +93,7 @@ $ gem install font-awesome-sass {% highlight scss %} @fa-font-path: "../font"; {% endhighlight %} -

    The font path is relative from your compiled CSS directory.

    +

    The font path is relative from your compiled CSS directory.

  • Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.
  • Check out the examples to start using Font Awesome!
    • diff --git a/src/icons.html b/src/icons.html index e64f098b6..a3929a76c 100644 --- a/src/icons.html +++ b/src/icons.html @@ -4,7 +4,7 @@ title: Font Awesome Icons navbar_active: icons relative_path: ../ --- -{% capture jumbotron_h1 %}  The Icons{% endcapture %} +{% capture jumbotron_h1 %}  The Icons{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% include jumbotron.html %} diff --git a/src/license.html b/src/license.html index 4e64f914f..f8fc85292 100644 --- a/src/license.html +++ b/src/license.html @@ -4,7 +4,7 @@ title: Font Awesome License navbar_active: license relative_path: ../ --- -{% capture jumbotron_h1 %}  License{% endcapture %} +{% capture jumbotron_h1 %}  License{% endcapture %} {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %} {% include jumbotron.html %} @@ -21,9 +21,9 @@ relative_path: ../
    -
    @@ -175,23 +175,23 @@ relative_path: ../
    - - + +
    - - + +
    - - + +
    - - + +
    @@ -201,23 +201,23 @@ relative_path: ../
    - - + +
    - - + +
    - - + +
    - - + +
    @@ -225,23 +225,23 @@ relative_path: ../
    - - + +
    - - + +
    - - + +
    - - + +
    @@ -254,23 +254,23 @@ relative_path: ../
    @@ -278,23 +278,23 @@ relative_path: ../
    Button - Button - + Button +
    Button - Button - + Button +
    Button - Button - + Button +
    Button - Button - + Button +
    @@ -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 %}