1 files changed, 157 insertions, 0 deletions
diff --git a/library/font_awesome/src/_includes/new-naming.html b/library/font_awesome/src/_includes/new-naming.html
new file mode 100644
index 000000000..9777649a6
--- /dev/null
+++ b/library/font_awesome/src/_includes/new-naming.html
@@ -0,0 +1,157 @@
+<section id="new-naming">
+  <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
+  <p class="lead text-center alert alert-success">fa-[name]-[shape]-[o]-[direction]</p>
+  <p>
+    A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> 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 names of variants.
+  </p>
+  <div class="row">
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">fa-*</h4>
+      <p class="margin-bottom-sm">Solid icons as the base variant</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-bookmark fa-li" aria-hidden="true"></i>
+          fa-bookmark
+        </li>
+        <li>
+          <i class="fa fa-comment fa-li" aria-hidden="true"></i>
+          fa-comment
+        </li>
+        <li>
+          <i class="fa fa-folder fa-li" aria-hidden="true"></i>
+          fa-folder
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-o</h4>
+      <p class="margin-bottom-sm">Outlined version of previous modifier</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-bookmark-o fa-li" aria-hidden="true"></i>
+          fa-bookmark-o
+        </li>
+        <li>
+          <i class="fa fa-comment-o fa-li" aria-hidden="true"></i>
+          fa-comment-o
+        </li>
+        <li>
+          <i class="fa fa-folder-o fa-li" aria-hidden="true"></i>
+          fa-folder-o
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-circle</h4>
+      <p class="margin-bottom-sm">Circle under previous modifier</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-check-circle fa-li" aria-hidden="true"></i>
+          fa-check-circle
+        </li>
+        <li>
+          <i class="fa fa-exclamation-circle fa-li" aria-hidden="true"></i>
+          fa-exclamation-circle
+        </li>
+        <li>
+          <i class="fa fa-plus-circle fa-li" aria-hidden="true"></i>
+          fa-plus-circle
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-square</h4>
+      <p class="margin-bottom-sm">Square under previous modifier</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-check-square fa-li" aria-hidden="true"></i>
+          fa-check-square
+        </li>
+        <li>
+          <i class="fa fa-twitter-square fa-li" aria-hidden="true"></i>
+          fa-twitter-square
+        </li>
+        <li>
+          <i class="fa fa-plus-square fa-li" aria-hidden="true"></i>
+          fa-plus-square
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
+      <p class="margin-bottom-sm">Directional modifier always at the end</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-arrow-right fa-li" aria-hidden="true"></i>
+          fa-arrow-right
+        </li>
+        <li>
+          <i class="fa fa-arrow-circle-right fa-li" aria-hidden="true"></i>
+          fa-arrow-circle-right
+        </li>
+        <li>
+          <i class="fa fa-angle-double-right fa-li" aria-hidden="true"></i>
+          fa-angle-double-right
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-alt</h4>
+      <p class="margin-bottom-sm">Alternative to the original</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-unlock-alt fa-li" aria-hidden="true"></i>
+          fa-unlock-alt
+        </li>
+        <li>
+          <i class="fa fa-list-alt fa-li" aria-hidden="true"></i>
+          fa-list-alt
+        </li>
+        <li>
+          <i class="fa fa-github-alt fa-li" aria-hidden="true"></i>
+          fa-github-alt
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">*-h, *-v</h4>
+      <p class="margin-bottom-sm">Horizontal &amp; vertical modifiers</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-arrows-v fa-li" aria-hidden="true"></i>
+          fa-arrows-v
+        </li>
+        <li>
+          <i class="fa fa-arrows-h fa-li" aria-hidden="true"></i>
+          fa-arrows-h
+        </li>
+        <li>
+          <i class="fa fa-ellipsis-v fa-li" aria-hidden="true"></i>
+          fa-ellipsis-v
+        </li>
+      </ul>
+    </div>
+    <div class="col-lg-3 col-md-4 col-sm-6">
+      <h4 class="margin-bottom-sm">Combine 'em up&helip;</h4>
+      <p class="margin-bottom-sm">Consistent when strung together</p>
+      <ul class="fa-ul padding-left-sm">
+        <li>
+          <i class="fa fa-arrow-circle-o-right fa-li" aria-hidden="true"></i>
+          fa-arrow-circle-o-right
+        </li>
+        <li>
+          <i class="fa fa-caret-square-o-right fa-li" aria-hidden="true"></i>
+          fa-caret-square-o-right
+        </li>
+        <li>
+          <i class="fa fa-hand-o-right fa-li" aria-hidden="true"></i>
+          fa-hand-o-right
+        </li>
+      </ul>
+    </div>
+
+  </div>
+
+</section>