Release 5.0.0-alpha7

docs/index.html

@@ -91,7 +91,7 @@
                 Getting Started with Font Awesome 5
               </h1>
 
-              <p class="mt0 mb4 mb6-ns lh-copy f4 gray7">
+              <p class="mt0 mb3 mb6-ns lh-copy f4 gray7">
                 Hey, thanks for supporting Font Awesome 5 and downloading a copy of our working project! The files in this folder are meant to serve as demos which show off all of the redesigned icons as well as how to use them.
               </p>
 
@@ -105,7 +105,7 @@
                   Easy &amp; Recommended!
                 </span>
 
-                <p class="mt0 mb4 lh-copy gray7">
+                <p class="mt0 mb3 lh-copy gray7">
                   Our SVG Framework lets you reference icons just as you always have with Font Awesome and renders them as SVGs within your UI, complete with all of the supportive styling you know and love. This requires the use of JavaScript. Here's how to try it out:
                 </p>
 
@@ -130,7 +130,7 @@
 
                 <h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
                 <div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
-<code class="pre gray2"><span class="blue2">&lt;head&gt;</span>
+<code class="pre gray2 lh-copy"><span class="blue2">&lt;head&gt;</span>
   <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/solid.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
   <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/fontawesome.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
 <span class="blue2">&lt;/head&gt;</span>
@@ -142,7 +142,7 @@
 
                 <h3 class="mt0 mb3 f3 fw6 gray5">Example with multiple styles:</h3>
                 <div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
-<code class="pre gray2"><span class="blue2">&lt;head&gt;</span>
+<code class="pre gray2 lh-copy"><span class="blue2">&lt;head&gt;</span>
   <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/light.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
   <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/regular.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
   <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/fontawesome.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
@@ -153,7 +153,9 @@
 <span class="blue2">&lt;/body&gt;</span></code>
                 </div>
 
-                <p class="mt0 mb5 lh-copy pa4 br2 bg-blue0">Need another example? Check out the <a href="svg-framework.html" class="link blue4 underline-hover fw6">SVG Framework demo</a>.</p>
+                <p class="mt0 mb3 lh-copy pa4 br2 bg-blue0">Need another example? Check out the <a href="svg-framework.html" class="link blue4 underline-hover fw6">SVG Framework demo</a>.</p>
+
+                <p class="mt0 mb3 lh-copy pa4 br2 bg-blue0">Need Font Awesome 4 icon names that are missing in 5? Learn how to <a href="#shim" class="link blue4 underline-hover fw6">shim using the JavaScript version.</a></p>
 
                 <h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
                 <div class="overflow-x-scroll">
@@ -240,7 +242,7 @@
                   Easy
                 </span>
 
-                <p class="mt0 mb4 lh-copy gray7">
+                <p class="mt0 mb3 lh-copy gray7">
                   A Font Awesome traditionalist? We get ya. Font Awesome 5 still lets you load your icons as a custom icon font (using CSS's <code class="blue4">@font-face</code>). Here's how:
                 </p>
 
@@ -267,7 +269,7 @@
 
                 <h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
                 <div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
-<code class="pre gray2"><span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-core.css<span class="blue4">"</span><span class="blue2">&gt;</span>
+<code class="pre gray2 lh-copy"><span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-core.css<span class="blue4">"</span><span class="blue2">&gt;</span>
 <span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-solid.css<span class="blue4">"</span><span class="blue2">&gt;</span>
 
 <span class="blue2">&lt;body&gt;</span>
@@ -277,7 +279,7 @@
 
                 <h3 class="mt0 mb3 f3 fw6 gray5">Example with multiple styles:</h3>
                 <div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
-<code class="pre gray2"><span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-core.css<span class="blue4">"</span><span class="blue2">&gt;</span>
+<code class="pre gray2 lh-copy"><span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-core.css<span class="blue4">"</span><span class="blue2">&gt;</span>
 <span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-regular.css<span class="blue4">"</span><span class="blue2">&gt;</span>
 <span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>css/font-awesome-light.css<span class="blue4">"</span><span class="blue2">&gt;</span>
 
@@ -287,7 +289,7 @@
 <span class="blue2">&lt;/body&gt;</span></code>
                 </div>
 
-                <p class="mt0 mb5 lh-copy pa4 br2 bg-green0">Need another example? Check out the <a href="webfont.html" class="link blue4 underline-hover fw6">Web Font demo</a>.</p>
+                <p class="mt0 mb3 lh-copy pa4 br2 bg-green0">Need another example? Check out the <a href="webfont.html" class="link blue4 underline-hover fw6">Web Font demo</a>.</p>
 
                 <h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
                 <div class="overflow-x-scroll">
@@ -374,7 +376,7 @@
                   Advanced
                 </span>
 
-                <p class="mt0 mb4 lh-copy gray7">
+                <p class="mt0 mb3 lh-copy gray7">
                   Want to use Font Awesome icons as SVGs in your project but want to do it without JavaScript or manage things more directly? We've prepped all of the icon styles as individual SVG sprites.
                 </p>
 
@@ -392,14 +394,14 @@
 
                 <h3 class="mt0 mb3 f3 fw6 gray5">Example:</h3>
                 <div class="bg-gray7 br2 bl bw3 b--gray6 pa4 mb4 overflow-scroll shadow-inset-6">
-<code class="pre gray2"><span class="blue2">&lt;body&gt;</span>
+<code class="pre gray2 lh-copy"><span class="blue2">&lt;body&gt;</span>
   <span class="blue2">&lt;svg&gt;</span>
     <span class="blue2">&lt;use</span> <span class="blue4">xlink:href="</span>solid.svg#user<span class="blue4">"</span><span class="blue2">&gt;&lt;/use&gt;</span>
   <span class="blue2">&lt;/svg&gt;</span>
 <span class="blue2">&lt;/body&gt;</span></code>
                 </div>
 
-                <p class="mt0 mb5 lh-copy pa4 br2 bg-red0">Need another example? Check out the <a href="svg-sprite.html" class="link blue4 underline-hover fw6">SVG Sprites demo</a>.</p>
+                <p class="mt0 mb3 lh-copy pa4 br2 bg-red0">Need another example? Check out the <a href="svg-sprite.html" class="link blue4 underline-hover fw6">SVG Sprites demo</a>.</p>
 
                 <h3 class="mt0 mb2 f3 fw6">Browser Compatibility</h3>
                 <div class="overflow-x-scroll">
@@ -480,7 +482,7 @@
                 </div>
 
                 <h3 class="mt0 mb2 f3 fw6">Cross-origin caveat</h3>
-                <p class="mt0 mb4 lh-copy gray7">This requires that you are serving the sprite from the same domain and port as the page.</p>
+                <p class="mt0 mb3 lh-copy gray7">This requires that you are serving the sprite from the same domain and port as the page.</p>
 
                 <h3 class="mt0 mb2 f3 fw6">Serving locally</h3>
                 <p class="mv0 lh-copy gray7">For this sprite to load you need to be serving it from http or https. If you try to open <code class="blue4">docs/svg-sprite.html</code> from the file system (if your address begins with <code class="blue4">file://</code>) it will fail to load.</p>
@@ -496,7 +498,7 @@
                   Advanced
                 </span>
 
-                <p class="mt0 mb4 lh-copy gray7">
+                <p class="mt0 mb3 lh-copy gray7">
                   Want to use Font Awesome 5's icons in your favorite Desktop Design tools or on a print-based project? No problem. Here's how to get that started:
                 </p>
 
@@ -524,62 +526,98 @@
               <hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
 
               <section id="upgrading" class="bg-white br2 pa4 relative">
-                <h2 class="mt0 mb2 b f5">Upgrading from Font Awesome Version 4</h2>
+                <div class="mb6">
+                  <h2 class="mt0 mb2 b f5">Upgrading from Font Awesome Version 4</h2>
 
-                <p class="mt0 mb4 lh-copy gray7">
-                  For those that are super-stoked to start using version 5, you can upgrade the version of Font Awesome you're using on a site or project. Below are the basic steps we recommend following:
-                </p>
+                  <p class="mt0 mb3 lh-copy gray7">
+                    For those that are super-stoked to start using version 5, you can upgrade the version of Font Awesome you're using on a site or project. Below are the basic steps we recommend following:
+                  </p>
 
-                <ol class="mt0 mb4 pl3 list-position-outside">
-                  <li class="lh-copy pl1 mb3">
-                    Remove the files associated with Font Awesome Version 4 from your project - including the <code class="blue4">fontawesome/</code> folder of web fonts and CSS/SCSS/LESS (if you're using <a class="link underline color-inherit hover-blue4" href="https://cdn.fontawesome.com/" target="_blank">Font Awesome's CDN</a>, you can skip this step.)
-                  </li>
-                  <li class="lh-copy pl1 mb3">
-                    <p class="mt0 mb2 lh-copy">Remove the reference to Font Awesome V4's JS or CSS from the <code class="blue4">&lt;head&gt;</code> of your document.</p>
+                  <ol class="mt0 mb4 pl3 list-position-outside">
+                    <li class="lh-copy pl1 mb3">
+                      Remove the files associated with Font Awesome Version 4 from your project - including the <code class="blue4">fontawesome/</code> folder of web fonts and CSS/SCSS/LESS (if you're using <a class="link underline color-inherit hover-blue4" href="https://cdn.fontawesome.com/" target="_blank">Font Awesome's CDN</a>, you can skip this step.)
+                    </li>
+                    <li class="lh-copy pl1 mb3">
+                      <p class="mt0 mb3 lh-copy">Remove the reference to Font Awesome V4's JS or CSS from the <code class="blue4">&lt;head&gt;</code> of your document.</p>
 
-                    <div class="bg-gray7 br2 bl bw3 b--gray6 ph4 pv3 mb2 overflow-scroll shadow-inset-6">
-  <code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>path/to/font-awesome-v4/css/font-awesome.min.css<span class="blue4">"</span><span class="blue2">&gt;</span></code>
-                    </div>
+                      <div class="bg-gray7 br2 bl bw3 b--gray6 ph4 pv3 mb2 overflow-scroll shadow-inset-6">
+    <code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2">&lt;link</span> <span class="blue4">rel="</span>stylesheet<span class="blue4">"</span> <span class="blue4">href="</span>path/to/font-awesome-v4/css/font-awesome.min.css<span class="blue4">"</span><span class="blue2">&gt;</span></code>
+                      </div>
 
-                    <div class="bg-gray7 br2 bl bw3 b--gray6 ph4 pv3 mb2 overflow-scroll shadow-inset-6">
-  <code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2">&lt;script</span> <span class="blue4">src="</span>https://use.fontawesome.com/your-embed-code.js<span class="blue4">"</span><span class="blue2">&lt;/script&gt;</span></code>
-                    </div>
-                  </li>
-                  <li class="lh-copy pl1 mb3">
-                    Pick your method of using Font Awesome 5: <a href="#svg-framework" class="link underline color-inherit hover-blue4">SVG Framework</a>, <a href="#webfont" class="link underline color-inherit hover-blue4">Web Font Framework</a>, or <a href="#svg-sprites" class="link underline color-inherit hover-blue4">SVG Sprite</a>.
-                  </li>
-                  <li class="lh-copy pl1 mb3">
-                    Follow the instructions and example code + demos for the method you've chosen.
-                  </li>
-                  <li class="lh-copy pl1 mb3">
-                    Find and replace any icons that have different names between V4 and V5 (with SVG Sprites, you'll need to change the syntax of every icon's reference more drastically + provide your own styling to support how they look).
-                  </li>
-                  <li class="lh-copy pl1">
-                    Update or remove any custom styling you've added around Font Awesome icons (if applicable).
-                  </li>
-                  <li class="lh-copy pl1 mb3">
-                    Click through your project's UI to make sure all icons are rendering as expected (optional, but recommended with pre-alphas).
-                  </li>
-                </ol>
+                      <div class="bg-gray7 br2 bl bw3 b--gray6 ph4 pv3 mb2 overflow-scroll shadow-inset-6">
+    <code class="pre gray2 strike" style="text-decoration-color: rgba(157, 216, 255, 0.75);"><span class="blue2">&lt;script</span> <span class="blue4">src="</span>https://use.fontawesome.com/your-embed-code.js<span class="blue4">"</span><span class="blue2">&lt;/script&gt;</span></code>
+                      </div>
+                    </li>
+                    <li class="lh-copy pl1 mb3">
+                      Pick your method of using Font Awesome 5: <a href="#svg-framework" class="link underline color-inherit hover-blue4">SVG Framework</a>, <a href="#webfont" class="link underline color-inherit hover-blue4">Web Font Framework</a>, or <a href="#svg-sprites" class="link underline color-inherit hover-blue4">SVG Sprite</a>.
+                    </li>
+                    <li class="lh-copy pl1 mb3">
+                      Follow the instructions and example code + demos for the method you've chosen.
+                    </li>
+                    <li class="lh-copy pl1 mb3">
+                      Find and replace any icons that have different names between V4 and V5 (with SVG Sprites, you'll need to change the syntax of every icon's reference more drastically + provide your own styling to support how they look).
+                    </li>
+                    <li class="lh-copy pl1 mb3">
+                      Update or remove any custom styling you've added around Font Awesome icons (if applicable).
+                    </li>
+                    <li class="lh-copy pl1">
+                      Click through your project's UI to make sure all icons are rendering as expected (optional, but recommended with pre-alphas).
+                    </li>
+                  </ol>
+                </div>
+
+                <h3 class="mt0 mb3 f3 b">Heads up about referencing icons</h3>
+
+                <p class="mt0 mb3 lh-copy">Not all icons and aliases from V4 are the same in V5 yet. So what's changed?</p>
 
                 <div role="alert" class="dt w-100 mb4 relative">
                   <div class="dtc v-top w-1 pv4 ph3 bg-warning5 warning0 br--left br2 tc">
                     <i class="fa5 fa5-exclamation-triangle fa5-lg animated infinite pulseOpacity animated3" aria-hidden="true"></i>
                   </div>
                   <div class="dtc v-top pa3 bg-warning0 br--right br2">
-                    <h3 class="mt0 mb2 lh-copy f3 b">Heads up! We're still working on getting to complete parity between V4 and V5</h3>
-                    <p class="mv0 lh-copy">Not all icons and aliases from V4 have made it to V5 yet. You'll want to double-check your pages and views to make sure the icons you need are in V5. If not, you may want to stick with 4 in the meantime.</p>
+
+                    <ul class="list ma0 pa0 lh-copy">
+                      <li class="pb2 mb2 bb bw1 b--warning1">We no longer have aliases in version 5, an icon has one official name</li>
+                      <li class="pb2 mb2 bb bw1 b--warning1">Some names have been changed to be more consistent</li>
+                      <li class="pb2 mb2 bb bw1 b--warning1">Any brand icons now have a prefix of <code class="b">fab</code></li>
+                      <li class="">Any icon that ended with <code class="b">-o</code> now has a prefix of <code class="b">far</code> and no <code class="b">-o</code> suffix</li>
+                    </ul>
                   </div>
                 </div>
+
+                <h3 class="mt0 mb3 f3 b">Need help? Use the shim.</h3>
+
+                <p class="mt0 mb3 lh-copy">We know that these changes can really slow you down in adopting V5. To help out we've created a <a class="link underline color-inherit hover-blue4" href="https://en.wikipedia.org/wiki/Shim_(computing)">shim</a> file if you decide to use the JavaScript method. You can use the old names and aliases and it will automatically convert things for you as your icons get replaced with SVG icons.</p>
+
+                <h3 id="shim" class="mt0 mb3 f3 fw6 gray5">Example Font Awesome version 4 shim (JavaScript method only):</h3>
+                <div class="bg-gray7 br2 bl bw3 b--gray6 pa4 overflow-scroll shadow-inset-6">
+<code class="pre gray2 lh-copy"><span class="blue2">&lt;head&gt;</span>
+  <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/regular.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
+  <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/brands.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
+  <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/packs/solid.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
+  <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/v4-shim.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
+  <span class="blue2">&lt;script</span> <span class="blue4">defer src="</span>/js/fontawesome.js<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/script&gt;</span>
+<span class="blue2">&lt;/head&gt;</span>
+<span class="blue2">&lt;body&gt;</span>
+  <span class="blue2">&lt;i</span> <span class="blue4">class="</span>fa fa-close<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/i&gt;</span>
+  <span class="gray6">&lt;!-- "close" is an alias to "times", V5 is &lt;i class="fa fa-times"&gt;&lt;/i&gt; --&gt;</span>
+  <span class="blue2">&lt;i</span> <span class="blue4">class="</span>fa fa-picture<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/i&gt;</span>
+  <span class="gray6">&lt;!-- Renamed to "image", V5 is &lt;i class="fa fa-image"&gt;&lt;/i&gt; --&gt;</span>
+  <span class="blue2">&lt;i</span> <span class="blue4">class="</span>fa fa-twitter<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/i&gt;</span>
+  <span class="gray6">&lt;!-- Needs the "fab" prefix, V5 &lt;i class="fab fa-twitter"&gt;&lt;/i&gt; --&gt;</span>
+  <span class="blue2">&lt;i</span> <span class="blue4">class="</span>fa fa-circle-o<span class="blue4">"</span><span class="blue2">&gt;</span><span class="blue2">&lt;/i&gt;</span>
+  <span class="gray6">&lt;!-- "far" prefix, lose the "-o", V5 &lt;i class="far fa-circle"&gt;&lt;/i&gt; --&gt;</span>
+<span class="blue2">&lt;/body&gt;</span></code>
+                </div>
               </section>
 
-              <hr class="bg-transparent ba bw1 b--gray1 pa0 mv4 mv6-ns">
+              <hr class="bg-transparent ba bw1 b--gray1 pa0 mt2 mb4 mv6-ns">
 
               <section id="feedback">
                 <h2 class="mt0 mb2 b f5">Questions? Comments? Feedback?</h2>
 
-                <p class="mt0 mb4 lh-copy gray7">
-                  We're still in pre-alpha land with Font Awesome 5, so we need your help. Please provide <a href="https://github.com/FortAwesome/Font-Awesome-Pro/issues/514" class="link underline color-inherit hover-blue4 fw6" target="_blank">feedback about this release specifically in our designated thread</a>. Design feedback, bugs and questions are welcome there. For future feature and icon requests, check out <a href="https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/CONTRIBUTING.md" class="link underline color-inherit hover-blue4 fw6" target="_blank">our contributing doc</a>.
+                <p class="mv0 f3 lh-copy gray7">
+                  We're still in pre-alpha land with Font Awesome 5, so we need your help. Please provide <a href="https://github.com/FortAwesome/Font-Awesome-Pro/issues/538" class="link underline color-inherit hover-blue4 fw6" target="_blank">feedback about this release specifically in our designated thread</a>. Design feedback, bugs and questions are welcome there. For future feature and icon requests, check out <a href="https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/CONTRIBUTING.md" class="link underline color-inherit hover-blue4 fw6" target="_blank">our contributing doc</a>.
                 </p>
               </section>