diff --git a/src/_includes/new-naming.html b/src/_includes/new-naming.html index 7caf93948..718d31228 100644 --- a/src/_includes/new-naming.html +++ b/src/_includes/new-naming.html @@ -1,69 +1,121 @@ -
+

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

- 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 the name of variants. - Here are a few examples. +

+ 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 + the name of variants. Here are a few examples. +

-

fa-icon-check

+

fa-icon-*

+

Solid icons as the base variant

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

*-alt

+

Outlined version of previous modifier

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

*-circle

+

Circle under previous modifier

  • - fa-icon-check-circle - - *-circle means a circle is under the previous modifier. + fa-icon-check-circle
    • -
  • - - fa-icon-check-circle-alt - - *-alt means that the previous modifier is outlined. -
    • -
  • - - fa-icon-check-square - - *-square means a square is under the previous modifier. -
    • -
  • - - fa-icon-check-square-alt - - *-alt means that the previous modifier is outlined. -
    • -
-
-
-

fa-icon-arrow-right

-
    -
  • - - fa-icon-arrow-circle-right - - *-circle means a circle is under the previous modifier. - *-right is the directional modifier, which always comes last to keep icons properly grouped - alphabetically. -
    • -
  • - - fa-icon-arrow-circle-alt-right - - *-alt means that the previous modifier is outlined. - *-right is the directional modifier, which always comes last to keep icons properly grouped - alphabetically. -
    • -
-
-
-

fa-icon-exclamation

-
  • - fa-icon-exclamation-circle - - *-circle means a circle is under the previous modifier. + fa-icon-exclamation-circle
  • - - fa-icon-exclamation-triangle - - *-triangle means a triangle is under the previous modifier. + + fa-icon-plus-circle
+
+

*-square

+

Square under previous modifier

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

*-right, *-up, etc.

+

Directional modifier always at the end

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

Combine 'em up...

+

Consistent when strung together

+
    +
  • + + fa-icon-arrow-circle-alt-right +
    • +
  • + + fa-icon-caret-square-alt-right +
    • +
  • + + fa-icon-hand-alt-right +
    • +
+
+
diff --git a/src/whats-new.html b/src/whats-new.html index ce486df98..b9af0edb1 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 %}