Update icons docs with Font Awesome 5

diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
index 390d35672f5ff5593272e7e5474528d8f60ff793..65df9216549a219385954c948da473d56c8241cd 100644 (file)
--- a/docs/documentation/components/nav.html
+++ b/docs/documentation/components/nav.html
@@ -61,7 +61,7 @@ doc-subtab: nav
   <div class="nav-center">
     <a class="nav-item">
       <span class="icon">
-        <i class="fa fa-github"></i>
+        <i class="fab fa-github"></i>
       </span>
     </a>
     <a class="nav-item">

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index 49fc0d95158fd551ff9b3fe84afcf66ce5c47b5d..f34c65a2ffb3ddee5595d48bf380baf4563a71e4 100644 (file)
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -11,40 +11,40 @@ doc-subtab: icon
 
 {% capture icon_example %}
 <span class="icon">
-  <i class="fa fa-home"></i>
+  <i class="fas fa-home"></i>
 </span>
 {% endcapture %}
 
 {% capture icon_color_example %}
 <span class="icon has-text-info">
-  <i class="fa fa-info-circle"></i>
+  <i class="fas fa-info-circle"></i>
 </span>
 <span class="icon has-text-success">
-  <i class="fa fa-check-square"></i>
+  <i class="fas fa-check-square"></i>
 </span>
 <span class="icon has-text-warning">
-  <i class="fa fa-warning"></i>
+  <i class="fas fa-exclamation-triangle"></i>
 </span>
 <span class="icon has-text-danger">
-  <i class="fa fa-ban"></i>
+  <i class="fas fa-ban"></i>
 </span>
 {% endcapture %}
 
 {% capture icon_sizes_example %}
 <span class="icon">
-  <i class="fa fa-camera-retro fa-lg"></i>
+  <i class="fas fa-camera-retro fa-lg"></i>
 </span>
 <span class="icon">
-  <i class="fa fa-camera-retro fa-2x"></i>
+  <i class="fas fa-camera-retro fa-2x"></i>
 </span>
 <span class="icon">
-  <i class="fa fa-camera-retro fa-3x"></i>
+  <i class="fas fa-camera-retro fa-3x"></i>
 </span>
 <span class="icon">
-  <i class="fa fa-camera-retro fa-4x"></i>
+  <i class="fas fa-camera-retro fa-4x"></i>
 </span>
 <span class="icon">
-  <i class="fa fa-camera-retro fa-5x"></i>
+  <i class="fas fa-camera-retro fa-5x"></i>
 </span>
 {% endcapture %}
 
@@ -54,7 +54,7 @@ doc-subtab: icon
   <div class="container">
     <h1 class="title">Icons</h1>
     <h2 class="subtitle">
-      Bulma is compatible with <strong>all icon font libraries</strong>: <a href="http://fontawesome.io/">Font Awesome</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
+      Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
     </h2>
     {%
       include meta.html
@@ -83,7 +83,7 @@ doc-subtab: icon
 
     <div class="content">
       <p>
-        By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome icons will <strong>inherit</strong> the font size.</p>
+        By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
     </div>
 
     {% include anchor.html name="Colors" %}
@@ -100,7 +100,7 @@ doc-subtab: icon
 
     <div class="content">
       <p>
-        The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
+        The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" target="_blank">additional sizes</a>.
       </p>
     </div>
 
@@ -109,7 +109,7 @@ doc-subtab: icon
         <tr>
           <th>Container class</th>
           <th>Container size</th>
-          <th>Font Awesome class</th>
+          <th>Font Awesome 5 class</th>
           <th>Icon size</th>
           <th>Result</th>
         </tr>
@@ -123,14 +123,14 @@ doc-subtab: icon
             <code>1rem x 1rem</code>
           </td>
           <td>
-            <code>fa</code>
+            <code>fas</code>
           </td>
           <td>
             <code>1em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-small">
-              <i class="fa fa-home"></i>
+              <i class="fas fa-home"></i>
             </span>
           </td>
         </tr>
@@ -142,27 +142,27 @@ doc-subtab: icon
             <code>1.5rem x 1.5rem</code>
           </td>
           <td>
-            <code>fa</code>
+            <code>fas</code>
           </td>
           <td>
             <code>1em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon">
-              <i class="fa fa-home"></i>
+              <i class="fas fa-home"></i>
             </span>
           </td>
         </tr>
         <tr>
           <td>
-            <code>fa fa-lg</code>
+            <code>fas fa-lg</code>
           </td>
           <td>
             <code>1.33em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon">
-              <i class="fa fa-lg fa-home"></i>
+              <i class="fas fa-lg fa-home"></i>
             </span>
           </td>
         </tr>
@@ -174,40 +174,40 @@ doc-subtab: icon
             <code>2rem x 2rem</code>
           </td>
           <td>
-            <code>fa</code>
+            <code>fas</code>
           </td>
           <td>
             <code>1em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-medium">
-              <i class="fa fa-home"></i>
+              <i class="fas fa-home"></i>
             </span>
           </td>
         </tr>
         <tr>
           <td>
-            <code>fa fa-lg</code>
+            <code>fas fa-lg</code>
           </td>
           <td>
             <code>1.33em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-medium">
-              <i class="fa fa-lg fa-home"></i>
+              <i class="fas fa-lg fa-home"></i>
             </span>
           </td>
         </tr>
         <tr>
           <td>
-            <code>fa fa-2x</code>
+            <code>fas fa-2x</code>
           </td>
           <td>
             <code>2em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-medium">
-              <i class="fa fa-2x fa-home"></i>
+              <i class="fas fa-2x fa-home"></i>
             </span>
           </td>
         </tr>
@@ -219,53 +219,53 @@ doc-subtab: icon
             <code>3rem x 3rem</code>
           </td>
           <td>
-            <code>fa</code>
+            <code>fas</code>
           </td>
           <td>
             <code>1em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-large">
-              <i class="fa fa-home"></i>
+              <i class="fas fa-home"></i>
             </span>
           </td>
         </tr>
         <tr>
           <td>
-            <code>fa fa-lg</code>
+            <code>fas fa-lg</code>
           </td>
           <td>
             <code>1.33em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-large">
-              <i class="fa fa-lg fa-home"></i>
+              <i class="fas fa-lg fa-home"></i>
             </span>
           </td>
         </tr>
         <tr>
           <td>
-            <code>fa fa-2x</code>
+            <code>fas fa-2x</code>
           </td>
           <td>
             <code>2em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-large">
-              <i class="fa fa-2x fa-home"></i>
+              <i class="fas fa-2x fa-home"></i>
             </span>
           </td>
         </tr>
         <tr>
           <td>
-            <code>fa fa-3x</code>
+            <code>fas fa-3x</code>
           </td>
           <td>
             <code>3em</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon is-large">
-              <i class="fa fa-3x fa-home"></i>
+              <i class="fas fa-3x fa-home"></i>
             </span>
           </td>
         </tr>
@@ -311,11 +311,11 @@ doc-subtab: icon
             Fixed width
           </td>
           <td>
-            <code>fa fa-fw</code>
+            <code>fas fa-fw</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon">
-              <i class="fa fa-home fa-fw"></i>
+              <i class="fas fa-home fa-fw"></i>
             </span>
           </td>
         </tr>
@@ -324,11 +324,11 @@ doc-subtab: icon
             Bordered
           </td>
           <td>
-            <code>fa fa-border</code>
+            <code>fas fa-border</code>
           </td>
           <td>
             <span class="icon">
-              <i class="fa fa-home fa-border"></i>
+              <i class="fas fa-home fa-border"></i>
             </span>
           </td>
         </tr>
@@ -337,11 +337,11 @@ doc-subtab: icon
             Animated
           </td>
           <td>
-            <code>fa fa-refresh fa-spin</code>
+            <code>fas fa-spinner fa-pulse</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon">
-              <i class="fa fa-refresh fa-spin"></i>
+              <i class="fas fa-spinner fa-pulse"></i>
             </span>
           </td>
         </tr>
@@ -350,36 +350,36 @@ doc-subtab: icon
             Rotated &amp; flipped
           </td>
           <td>
-            <code>fa fa-shield</code><br>
-            <code>fa fa-shield fa-rotate-90</code><br>
-            <code>fa fa-shield fa-rotate-180</code><br>
-            <code>fa fa-shield fa-rotate-270</code><br>
-            <code>fa fa-shield fa-flip-horizontal</code><br>
-            <code>fa fa-shield fa-flip-vertical</code>
+            <code>fas fa-shield-alt</code><br>
+            <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-90"</code><br>
+            <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-180"</code><br>
+            <code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-270"</code><br>
+            <code>fas fa-shield-alt</code> <code>data-fa-transform="flip-h"</code><br>
+            <code>fas fa-shield-alt</code> <code>data-fa-transform="flip-v"</code>
           </td>
           <td class="bd-icon-size">
             <span class="icon">
-              <i class="fa fa-shield"></i>
+              <i class="fas fa-shield-alt"></i>
             </span>
             <br>
             <span class="icon">
-              <i class="fa fa-shield fa-rotate-90"></i>
+              <i class="fas fa-shield-alt" data-fa-transform="rotate-90"></i>
             </span>
             <br>
             <span class="icon">
-              <i class="fa fa-shield fa-rotate-180"></i>
+              <i class="fas fa-shield-alt" data-fa-transform="rotate-180"></i>
             </span>
             <br>
             <span class="icon">
-              <i class="fa fa-shield fa-rotate-270"></i>
+              <i class="fas fa-shield-alt" data-fa-transform="rotate-270"></i>
             </span>
             <br>
             <span class="icon">
-              <i class="fa fa-shield fa-flip-horizontal"></i>
+              <i class="fas fa-shield-alt" data-fa-transform="flip-h"></i>
             </span>
             <br>
             <span class="icon">
-              <i class="fa fa-shield fa-flip-vertical"></i>
+              <i class="fas fa-shield-alt" data-fa-transform="flip-v"></i>
             </span>
           </td>
         </tr>
@@ -390,16 +390,16 @@ doc-subtab: icon
           <td>
             {% highlight html %}<span class="icon is-medium">
   <span class="fa-stack">
-    <i class="fa fa-circle fa-stack-2x"></i>
-    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
+    <i class="fas fa-circle fa-stack-2x"></i>
+    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
   </span>
 </span>{% endhighlight %}
           </td>
           <td class="bd-icon-size">
             <span class="icon is-medium">
               <span class="fa-stack">
-                <i class="fa fa-circle fa-stack-2x"></i>
-                <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
+                <i class="fas fa-circle fa-stack-2x"></i>
+                <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
               </span>
             </span>
           </td>
@@ -408,16 +408,16 @@ doc-subtab: icon
           <td>
             {% highlight html %}<span class="icon is-large">
   <span class="fa-stack fa-lg">
-    <i class="fa fa-camera fa-stack-1x"></i>
-    <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
+    <i class="fas fa-camera fa-stack-1x"></i>
+    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
   </span>
 </span>{% endhighlight %}
           </td>
           <td class="bd-icon-size">
             <span class="icon is-large">
               <span class="fa-stack fa-lg">
-                <i class="fa fa-camera fa-stack-1x"></i>
-                <i class="fa fa-ban fa-stack-2x has-text-danger"></i>
+                <i class="fas fa-camera fa-stack-1x"></i>
+                <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
               </span>
             </span>
           </td>