Use Font Awesome 5

diff --git a/docs/_config.yml b/docs/_config.yml
index 4563032da30d2046d3a2e83cd842cebb8f04d774..11cc38bf213cb4dc1795d3eabee942e8c3c4b879 100644 (file)
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -11,13 +11,6 @@ permalink:     pretty
 url:           https://bulma.io
 exclude:       ['icons', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
 
-# Icons
-
-fontawesome:   https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
-iconic:        https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css
-ionicons:      https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
-mdi:           https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css
-
 # Variables
 
 documentation: "/documentation/overview/start/"

diff --git a/docs/_data/icons.json b/docs/_data/icons.json
new file mode 100644 (file)
index 0000000..01beb2d
--- /dev/null
+++ b/docs/_data/icons.json
@@ -0,0 +1,7 @@
+{
+  "fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
+  "fontawesome5": "https://use.fontawesome.com/releases/v5.0.0/js/all.js",
+  "iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css",
+  "ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
+  "mdi": "https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css"
+}
\ No newline at end of file

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index 30b959604fdaf42139ce0d0020d18a41ec64d386..3a49c3c585d77ae37f3bcbfe6d17e06327958f9e 100644 (file)
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -13,7 +13,7 @@
           </p>
           <a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
             <span class="icon">
-              <i class="fa fa-rss"></i>
+              <i class="fas fa-rss"></i>
             </span>
             <span>Subscribe</span>
           </a>

diff --git a/docs/_includes/elements/tw-button.html b/docs/_includes/elements/tw-button.html
index 8c44a0725c72c4e68c89f54cfcd845e899a2e658..4e1b89a835434c99b53f27d2577ef6bbecb1d3d0 100644 (file)
--- a/docs/_includes/elements/tw-button.html
+++ b/docs/_includes/elements/tw-button.html
@@ -5,7 +5,7 @@
   target="_blank"
   href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
   <span class="icon">
-    <i class="fa fa-twitter"></i>
+    <i class="fab fa-twitter"></i>
   </span>
   <span>
     {{ include.label }}

diff --git a/docs/_includes/examples/navbar-bottom.html b/docs/_includes/examples/navbar-bottom.html
index c162d727ab36bbfc81406efdc9d3d0bee56bc266..2b0973e5884bb9dfc3888c6bcd3feacc8d706972 100644 (file)
--- a/docs/_includes/examples/navbar-bottom.html
+++ b/docs/_includes/examples/navbar-bottom.html
@@ -52,7 +52,7 @@
           <p class="control">
             <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
               <span class="icon">
-                <i class="fa fa-twitter"></i>
+                <i class="fab fa-twitter"></i>
               </span>
               <span>
                 Tweet
@@ -62,7 +62,7 @@
           <p class="control">
             <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
               <span class="icon">
-                <i class="fa fa-download"></i>
+                <i class="fas fa-download"></i>
               </span>
               <span>Download</span>
             </a>

diff --git a/docs/_includes/examples/navbar-color.html b/docs/_includes/examples/navbar-color.html
index 7d7ba0751d31d9547b059bfb5408acdfd55c0520..039c51e765c7346909661306dc343f198d0c2830 100644 (file)
--- a/docs/_includes/examples/navbar-color.html
+++ b/docs/_includes/examples/navbar-color.html
@@ -56,7 +56,7 @@
           <p class="control">
             <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
               <span class="icon">
-                <i class="fa fa-twitter"></i>
+                <i class="fab fa-twitter"></i>
               </span>
               <span>
                 Tweet
@@ -66,7 +66,7 @@
           <p class="control">
             <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
               <span class="icon">
-                <i class="fa fa-download"></i>
+                <i class="fas fa-download"></i>
               </span>
               <span>Download</span>
             </a>

diff --git a/docs/_includes/examples/navbar.html b/docs/_includes/examples/navbar.html
index b29c71914bc4f4938ed7c6c756111bde520fd829..42a104ccdb1bf0447370dbeab6f1032b1da8e99c 100644 (file)
--- a/docs/_includes/examples/navbar.html
+++ b/docs/_includes/examples/navbar.html
@@ -52,7 +52,7 @@
           <p class="control">
             <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
               <span class="icon">
-                <i class="fa fa-twitter"></i>
+                <i class="fab fa-twitter"></i>
               </span>
               <span>
                 Tweet
@@ -62,7 +62,7 @@
           <p class="control">
             <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
               <span class="icon">
-                <i class="fa fa-download"></i>
+                <i class="fas fa-download"></i>
               </span>
               <span>Download</span>
             </a>

diff --git a/docs/_includes/features.html b/docs/_includes/features.html
index fd7c0bc2307f439f2ae622bf8bd370be028c428f..95c8e0bfb64ff79f6f59ec9e3c17664c5cc0f31d 100644 (file)
--- a/docs/_includes/features.html
+++ b/docs/_includes/features.html
@@ -65,13 +65,13 @@
       <nav class="level is-mobile">
         <div class="level-left">
           <a class="level-item">
-            <span class="icon is-small"><i class="fa fa-reply"></i></span>
+            <span class="icon is-small"><i class="fas fa-reply"></i></span>
           </a>
           <a class="level-item">
-            <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+            <span class="icon is-small"><i class="fas fa-retweet"></i></span>
           </a>
           <a class="level-item">
-            <span class="icon is-small"><i class="fa fa-heart"></i></span>
+            <span class="icon is-small"><i class="fas fa-heart"></i></span>
           </a>
         </div>
       </nav>
@@ -192,7 +192,7 @@
     <a class="button">
       <span>Dropdown button</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fas fa-angle-down"></i>
       </span>
     </a>
   </div>
@@ -270,7 +270,7 @@
     <p class="control has-icons-left">
       <input class="input is-small" type="text" placeholder="Search">
       <span class="icon is-small is-left">
-        <i class="fa fa-search"></i>
+        <i class="fas fa-search"></i>
       </span>
     </p>
   </div>
@@ -283,37 +283,37 @@
   </p>
   <a class="panel-block is-active">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     bulma
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     marksheet
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     minireset.css
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     jgthms.github.io
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-code-fork"></i>
+      <i class="fas fa-code-branch"></i>
     </span>
     daniellowtw/infBoard
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-code-fork"></i>
+      <i class="fas fa-code-branch"></i>
     </span>
     mojs
   </a>
@@ -334,25 +334,25 @@
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -378,13 +378,13 @@
     <nav class="level is-mobile">
       <div class="level-left">
         <a class="level-item">
-          <span class="icon is-small"><i class="fa fa-reply"></i></span>
+          <span class="icon is-small"><i class="fas fa-reply"></i></span>
         </a>
         <a class="level-item">
-          <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+          <span class="icon is-small"><i class="fas fa-retweet"></i></span>
         </a>
         <a class="level-item">
-          <span class="icon is-small"><i class="fa fa-heart"></i></span>
+          <span class="icon is-small"><i class="fas fa-heart"></i></span>
         </a>
       </div>
     </nav>

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 46de21b7f28b9fb22483f1428647ee726de226b1..7464e038444ad44d1ac969cb2dab1c1072e0619c 100644 (file)
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -19,7 +19,7 @@
                 <div class="control has-icons-left is-expanded">
                   <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
                   <span class="icon is-small is-left">
-                    <i class="fa fa-envelope"></i>
+                    <i class="fas fa-envelope"></i>
                   </span>
                 </div>
                 <div class="control">

diff --git a/docs/_includes/getting-started.html b/docs/_includes/getting-started.html
index eb30d11eba0d1fa0bd97b5201e820fa9451309ad..872f20889c13049a2c1ac2c043e580a5f62ea60d 100644 (file)
--- a/docs/_includes/getting-started.html
+++ b/docs/_includes/getting-started.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Hello Bulma!</title>
-    <link rel="stylesheet" href="{{ site.fontawesome }}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.version }}/css/bulma.min.css">
+    <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
   </head>
   <body>
   <section class="section">

diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index c2e69a612609b84992808746b17067073e6bc250..7a3ee584dc4d7522d55b88f7d93bcdf49007781c 100644 (file)
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -6,15 +6,17 @@
 
   <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
 
-  <link rel="stylesheet" href="{{ site.fontawesome }}">
+  {% if page.fontawesome4 %}
+    <link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
+  {% endif %}
   {% if page.iconic %}
-    <link rel="stylesheet" href="{{ site.iconic }}">
+    <link rel="stylesheet" href="{{ site.data.icons.iconic }}">
   {% endif %}
   {% if page.ionicons %}
-    <link rel="stylesheet" href="{{ site.ionicons }}">
+    <link rel="stylesheet" href="{{ site.data.icons.ionicons }}">
   {% endif %}
   {% if page.mdi %}
-    <link rel="stylesheet" href="{{ site.mdi }}">
+    <link rel="stylesheet" href="{{ site.data.icons.mdi }}">
   {% endif %}
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
 
@@ -45,4 +47,6 @@
   <link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201701041855">
   <meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201701041855">
   <meta name="theme-color" content="#00d1b2">
+
+  <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
 </head>

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index c016b71f23d68749b642a2d5a4d7efc34ef7a434..78e9a75c59ba20bfd1560912d8e4db68a1a575f9 100644 (file)
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -8,12 +8,12 @@
   <div class="nav-center">
     <a class="nav-item" href="{{ site.github }}">
       <span class="icon">
-        <i class="fa fa-github"></i>
+        <i class="fab fa-github"></i>
       </span>
     </a>
     <a class="nav-item" href="{{ site.twitter }}">
       <span class="icon">
-        <i class="fa fa-twitter"></i>
+        <i class="fab fa-twitter"></i>
       </span>
     </a>
   </div>
@@ -50,7 +50,7 @@
             target="_blank"
             href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
             <span class="icon">
-              <i class="fa fa-twitter"></i>
+              <i class="fab fa-twitter"></i>
             </span>
             <span>Tweet</span>
           </a>
@@ -58,7 +58,7 @@
         <p class="control">
           <a class="button is-primary" href="{{ site.download }}">
             <span class="icon">
-              <i class="fa fa-download"></i>
+              <i class="fas fa-download"></i>
             </span>
             <span>Download</span>
           </a>

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index ad43eadcb4cdd63f6053b4c11fe71139e92bf263..ac21a07645b4fdc1865e0680b5e2909d5bf4c22e 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -10,13 +10,13 @@
 
     <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
       <span class="icon" style="color: #333;">
-        <i class="fa fa-lg fa-github"></i>
+        <i class="fab fa-lg fa-github"></i>
       </span>
     </a>
 
     <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
       <span class="icon" style="color: #55acee;">
-        <i class="fa fa-lg fa-twitter"></i>
+        <i class="fab fa-lg fa-twitter"></i>
       </span>
     </a>
 
@@ -101,7 +101,7 @@
                   <div class="level-item">
                     <a class="button bd-is-rss is-small" href="{{ site.url }}/atom.xml">
                       <span class="icon is-small">
-                        <i class="fa fa-rss"></i>
+                        <i class="fas fa-rss"></i>
                       </span>
                       <span>Subscribe</span>
                     </a>
@@ -163,12 +163,12 @@
     <div class="navbar-end">
       <a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
         <span class="icon" style="color: #333;">
-          <i class="fa fa-lg fa-github"></i>
+          <i class="fab fa-lg fa-github"></i>
         </span>
       </a>
       <a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
         <span class="icon" style="color: #55acee;">
-          <i class="fa fa-lg fa-twitter"></i>
+          <i class="fab fa-lg fa-twitter"></i>
         </span>
       </a>
       <div class="navbar-item">
@@ -192,7 +192,7 @@
           <p class="control">
             <a class="button is-primary" href="{{ site.download }}">
               <span class="icon">
-                <i class="fa fa-download"></i>
+                <i class="fas fa-download"></i>
               </span>
               <span>Download</span>
             </a>

diff --git a/docs/_includes/pro.html b/docs/_includes/pro.html
index b7bf2b03b07a9333d130b9a4261214bd1325f6e3..bb0edc5b628404b6f52574450a3c202ced58a221 100644 (file)
--- a/docs/_includes/pro.html
+++ b/docs/_includes/pro.html
@@ -1,7 +1,7 @@
 <article class="media bd-pro bd-is-{{ include.type }}">
   <aside class="media-left">
     <span class="icon">
-      <i class="fa fa-{{ include.icon }}"></i>
+      <i class="{% if include.icon_brand %}fab{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
     </span>
   </aside>
   <div class="media-content">

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index a2333f5bd31fdca2b8f352433caf3c0257f15db6..9a05f1fd81d5fa12829a3cea412e75f0cef5a20a 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -109,7 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
       const $parent = $el.parentNode;
       if ($parent && $parent.classList.contains('bd-is-more')) {
-        const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
+        const showEl = '<button class="bd-show"><div><span class="icon"><i class="fas fa-code"></i></span> <strong>Show code</strong></div></button>';
         $el.insertAdjacentHTML('beforeend', showEl);
       } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
         $el.insertAdjacentHTML('beforeend', expandEl);

diff --git a/docs/_javascript/navbar.js b/docs/_javascript/navbar.js
index 30fb789c9ceacc66115d12c98ee9735d3ac23089..4d3b21474c9614b40e6b242c43f6a0ac4291d82c 100644 (file)
--- a/docs/_javascript/navbar.js
+++ b/docs/_javascript/navbar.js
@@ -12,12 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     if (fixedBottom) {
       fixBottomEl.className = 'button is-success';
-      fixBottomElIcon.className = 'fa fa-check-square-o';
+      fixBottomElIcon.className = 'far fa-check-square';
       rootEl.classList.add('has-navbar-fixed-bottom');
       navbarBottomEl.classList.remove('is-hidden');
     } else {
       fixBottomEl.className = 'button is-link';
-      fixBottomElIcon.className = 'fa fa-square-o';
+      fixBottomElIcon.className = 'far fa-square';
       rootEl.classList.remove('has-navbar-fixed-bottom');
       navbarBottomEl.classList.add('is-hidden');
     }

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index a79f826957555cf8c1680ef59455f0fa9acd50f1..5503d3266bbefde8479218f58b8d42ea6f9692b8 100644 (file)
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -12,7 +12,7 @@ route: blog
         <div class="bd-article-image is-single is-{{ page.color }}">
           <span class="bd-article-overlay"></span>
           <span class="bd-article-icon">
-            <i class="fa fa-{{ page.icon }}"></i>
+            <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
           </span>
           <strong class="bd-article-info">
             <span>

diff --git a/docs/_posts/2017-03-10-new-field-element.md b/docs/_posts/2017-03-10-new-field-element.md
index 829383b899fbee0229b66513e0aabdcc3ee6f675..f01ab647e37953272bb8cfe8c0194ea0a853fae2 100644 (file)
--- a/docs/_posts/2017-03-10-new-field-element.md
+++ b/docs/_posts/2017-03-10-new-field-element.md
@@ -5,7 +5,7 @@ published: true
 introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
 color: "success"
 name: "Field element"
-icon: "square-o"
+icon: "square"
 ---
 
 **TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**
@@ -63,7 +63,7 @@ But it allows more elaborate designs.
 <p class="control has-icon has-icon-right">
   <input class="input is-success" type="text" placeholder="Text input" value="bulma">
   <span class="icon is-small">
-    <i class="fa fa-check"></i>
+    <i class="fas fa-check"></i>
   </span>
   <span class="help is-success">This username is available</span>
 </p>
@@ -74,7 +74,7 @@ But it allows more elaborate designs.
   <p class="control has-icon has-icon-right">
     <input class="input is-success" type="text" placeholder="Text input" value="bulma">
     <span class="icon is-small">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </p>
   <p class="help is-success">This username is available</p>
@@ -89,13 +89,13 @@ Addons with multiple icons or states.
   <p class="control is-expanded has-icon">
     <input class="input is-success" type="text" placeholder="Username" value="alexsmith">
     <span class="icon is-small">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </p>
   <p class="control is-expanded has-icon">
     <input class="input is-warning" type="email" placeholder="Email" value="alex@smith.com">
     <span class="icon is-small">
-      <i class="fa fa-warning"></i>
+      <i class="fas fa-exclamation-triangle"></i>
     </span>
   </p>
   <p class="control is-expanded is-loading">
@@ -119,7 +119,7 @@ Horizontal form with help text
       <p class="control is-expanded has-icon has-icon-right">
         <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
         <span class="icon is-small">
-          <i class="fa fa-check"></i>
+          <i class="fas fa-check"></i>
         </span>
       </p>
       <p class="help is-success">This email is correct</p>

diff --git a/docs/_posts/2017-11-14-bulma-is-on-patreon.md b/docs/_posts/2017-11-14-bulma-is-on-patreon.md
index 0054b87a2f6103ea62740e1f3eaaf0b06a99e507..422d386a4e8880733bfdd61695f28255319ff7dc 100644 (file)
--- a/docs/_posts/2017-11-14-bulma-is-on-patreon.md
+++ b/docs/_posts/2017-11-14-bulma-is-on-patreon.md
@@ -4,7 +4,8 @@ layout: post
 introduction: "Fix your navbar at the top or bottom"
 color: "primary"
 name: "Bulma on Patreon"
-icon: "support"
+icon: "patreon"
+icon_brand: true
 ---
 
 **Bulma** has now its own [Patreon page](https://www.patreon.com/jgthms):

diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass
index 9d0e2253974a0725477255452836293e14d03d6f..9b0fa34222526abc8330d83ae15ab8f8518ac39e 100644 (file)
--- a/docs/_sass/route.sass
+++ b/docs/_sass/route.sass
@@ -7,12 +7,11 @@ html.route-index
   .title.is-2 a:hover
     color: $blue
   .title.is-2 .icon.is-medium
+    font-size: 56px
     left: -80px
     opacity: 0.1
     position: absolute
     top: 10px
-    .fa
-      font-size: 56px
   .hero .title.is-2 a
     color: $white
   .hero .title.is-2 a:hover

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index d8dcd82a3dc2a05a18f05b2fed64ec01b9e2e00c..1e55aeb51282dd6b0f3826dd5f7cb46c0ab8970b 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -116,11 +116,10 @@
 
 .bd-article-icon
   color: $black
+  font-size: 56px
   opacity: 0.25
   & > span
     display: block
-  .fa
-    font-size: 56px
 
 .bd-article-info
   padding: 20px

diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html
index 003559f24e51c4c1d3b404c21beddfbffc2e5c1c..5573325bcb91efe1810fb1ac1dc851a1a7a769bd 100644 (file)
--- a/docs/alternative-to-bootstrap.html
+++ b/docs/alternative-to-bootstrap.html
@@ -2,6 +2,7 @@
 bulma:
 - type: "bulma"
   icon: "css3"
+  icon_brand: true
   title: "Modern features"
   content: "By using the latest CSS3 features such as **Flexbox**, and planning on using **CSS Variables** and **CSS Grid**, Bulma aims to stay on the bleeding edge of browser technology."
 - type: "bulma"
@@ -13,9 +14,10 @@ bulma:
   title: "Easy-to-learn syntax"
   content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/modifiers/syntax/)"
 - type: "bulma"
-  icon: "fa"
-  title: "Font Awesome support"
-  content: "Bulma is compatible with [Font Awesome](http://fontawesome.io/) thanks to the `.icon` element."
+  icon: "font-awesome"
+  icon_brand: true
+  title: "Font Awesome 5 support"
+  content: "Bulma is compatible with both [Font Awesome 4](http://fontawesome.io/) and [Font Awesome 5](https://fontawesome.com/) thanks to the `.icon` element."
 - type: "bulma"
   icon: "plus"
   title: "100+ useful CSS helpers"
@@ -35,6 +37,7 @@ bootstrap:
   content: "Considering how long it has been around, Bootstrap has a **larger community** than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet."
 - type: "bootstrap"
   icon: "internet-explorer"
+  icon_brand: true
   title: "Internet Explorer compatibility"
   content: "While 90% of Bulma works in IE11, Bootstrap has better **compatibility** with this browser."
 - type: "bootstrap"
@@ -44,7 +47,7 @@ bootstrap:
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="has-navbar-fixed-top">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -53,7 +56,6 @@ bootstrap:
 
     <title>Bulma: an alternative to Bootstrap</title>
 
-    <link rel="stylesheet" href="{{ site.fontawesome }}">
     <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
@@ -83,11 +85,11 @@ bootstrap:
     <link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201701041855">
     <meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201701041855">
     <meta name="theme-color" content="#00d1b2">
+
+    <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
   </head>
   <body>
-    <div class="container">
-      {% include navbar.html id="Documentation" %}
-    </div>
+    {% include navbar.html id="Documentation" %}
 
     <main class="bd-bootstrap">
       <section class="hero is-medium">
@@ -136,6 +138,7 @@ bootstrap:
                   include pro.html
                   type=pro.type
                   icon=pro.icon
+                  icon_brand=pro.icon_brand
                   title=pro.title
                   content=pro.content
                 %}
@@ -156,6 +159,7 @@ bootstrap:
                   include pro.html
                   type=pro.type
                   icon=pro.icon
+                  icon_brand=pro.icon_brand
                   title=pro.title
                   content=pro.content
                 %}

diff --git a/docs/blog.html b/docs/blog.html
index 528552ccc71d2620a69b4e55ee7530a4a5997a88..e956abf669c7eb218734608e554f72aae4d3ec9e 100644 (file)
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -13,7 +13,7 @@ route: blog
             <a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
               <span class="bd-article-overlay"></span>
               <span class="bd-article-icon">
-                <i class="fa fa-{{ post.icon }}"></i>
+                <i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
               </span>
               <strong class="bd-article-info">
                 <span>

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2ca8d950c869e3b82b95f94adcea926807430a75..b6e993764dfc172552d48162fc1ee06188e70b00 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -11816,6 +11816,7 @@ svg {
 
 .bd-article-icon {
   color: #0a0a0a;
+  font-size: 56px;
   opacity: 0.25;
 }
 
@@ -11823,10 +11824,6 @@ svg {
   display: block;
 }
 
-.bd-article-icon .fa {
-  font-size: 56px;
-}
-
 .bd-article-info {
   padding: 20px;
 }
@@ -12519,16 +12516,13 @@ html.route-index .title.is-2 a:hover {
 }
 
 html.route-index .title.is-2 .icon.is-medium {
+  font-size: 56px;
   left: -80px;
   opacity: 0.1;
   position: absolute;
   top: 10px;
 }
 
-html.route-index .title.is-2 .icon.is-medium .fa {
-  font-size: 56px;
-}
-
 html.route-index .hero .title.is-2 a {
   color: white;
 }

diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html
index 22055cac797a4074d4310d3573f797c6a3e27627..46dc70af399a2922e43d398fa5752b571b9270af 100644 (file)
--- a/docs/documentation/components/breadcrumb.html
+++ b/docs/documentation/components/breadcrumb.html
@@ -43,10 +43,10 @@ doc-subtab: breadcrumb
 {% capture breadcrumb_icons_example %}
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
-    <li><a href="#"><span class="icon is-small"><i class="fa fa-home"></i></span><span>Bulma</span></a></li>
-    <li><a href="#"><span class="icon is-small"><i class="fa fa-book"></i></span><span>Documentation</span></a></li>
-    <li><a href="#"><span class="icon is-small"><i class="fa fa-puzzle-piece"></i></span><span>Components</span></a></li>
-    <li class="is-active"><a href="#" aria-current="page"><span class="icon is-small"><i class="fa fa-thumbs-up" aria-hidden="true"></i></span><span>Breadcrumb</span></a></li>
+    <li><a href="#"><span class="icon is-small"><i class="fas fa-home"></i></span><span>Bulma</span></a></li>
+    <li><a href="#"><span class="icon is-small"><i class="fas fa-book"></i></span><span>Documentation</span></a></li>
+    <li><a href="#"><span class="icon is-small"><i class="fas fa-puzzle-piece"></i></span><span>Components</span></a></li>
+    <li class="is-active"><a href="#" aria-current="page"><span class="icon is-small"><i class="fas fa-thumbs-up" aria-hidden="true"></i></span><span>Breadcrumb</span></a></li>
   </ul>
 </nav>
 {% endcapture %}
@@ -167,7 +167,7 @@ doc-subtab: breadcrumb
     {% include anchor.html name="Icons" %}
 
     <div class="content">
-      <p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
+      <p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
     </div>
 
     {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}

diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html
index ea4bd52ca6e53ae76cd58e7a5d6a032975d6343d..7b564b6b34fd32e4d41b004e08ccae62a48680ed 100644 (file)
--- a/docs/documentation/components/card.html
+++ b/docs/documentation/components/card.html
@@ -44,7 +44,7 @@ doc-subtab: card
     </p>
     <a href="#" class="card-header-icon" aria-label="more options">
       <span class="icon">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </a>
   </header>

diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 154d7d2edad898cbf40f3add2e621ed72a94bbbc..5f41a7087d371a9f0e72e5e4e4df7f190059ec8d 100644 (file)
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -11,7 +11,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
       <span>Dropdown button</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </button>
   </div>
@@ -44,7 +44,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
       <span>Content</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </button>
   </div>
@@ -72,7 +72,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
       <span>Click me</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </button>
   </div>
@@ -114,7 +114,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
       <span>Hover me</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </button>
   </div>
@@ -134,7 +134,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
       <span>Left aligned</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </button>
   </div>
@@ -154,7 +154,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
       <span>Right aligned</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down" aria-hidden="true"></i>
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
       </span>
     </button>
   </div>
@@ -174,7 +174,7 @@ doc-subtab: dropdown
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
       <span>Dropup button</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-up" aria-hidden="true"></i>
+        <i class="fas fa-angle-up" aria-hidden="true"></i>
       </span>
     </button>
   </div>

diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html
index bf47cc2227ddf7fa31d8e91b0c56e4e1ca117340..9db2ef731339df6db6843929a64f68b2ec8d47d7 100644 (file)
--- a/docs/documentation/components/modal.html
+++ b/docs/documentation/components/modal.html
@@ -150,16 +150,16 @@ doc-subtab: modal
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
             </p>
           </div>
-          <nav class="level">
+          <nav class="level is-mobile">
             <div class="level-left">
               <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-reply"></i></span>
+                <span class="icon is-small"><i class="fas fa-reply"></i></span>
               </a>
               <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+                <span class="icon is-small"><i class="fas fa-retweet"></i></span>
               </a>
               <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-heart"></i></span>
+                <span class="icon is-small"><i class="fas fa-heart"></i></span>
               </a>
             </div>
           </nav>

diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
index 418d55c66c00376c78fc61c8257ee0695fc51c90..390d35672f5ff5593272e7e5474528d8f60ff793 100644 (file)
--- a/docs/documentation/components/nav.html
+++ b/docs/documentation/components/nav.html
@@ -66,7 +66,7 @@ doc-subtab: nav
     </a>
     <a class="nav-item">
       <span class="icon">
-        <i class="fa fa-twitter"></i>
+        <i class="fab fa-twitter"></i>
       </span>
     </a>
   </div>
@@ -97,7 +97,7 @@ doc-subtab: nav
         <p class="control">
           <a class="button" >
             <span class="icon">
-              <i class="fa fa-twitter"></i>
+              <i class="fab fa-twitter"></i>
             </span>
             <span>Tweet</span>
           </a>
@@ -105,7 +105,7 @@ doc-subtab: nav
         <p class="control">
           <a class="button is-primary">
             <span class="icon">
-              <i class="fa fa-download"></i>
+              <i class="fas fa-download"></i>
             </span>
             <span>Download</span>
           </a>

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 62b82f00dc3d29ef5ff189311ddba3392d9dc721..aa5ed166297557d85ba29cf80c619d12a9657f3d 100644 (file)
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -114,7 +114,7 @@ doc-subtab: navbar
     <p class="control">
       <a class="button">
         <span class="icon">
-          <i class="fa fa-twitter" aria-hidden="true"></i>
+          <i class="fab fa-twitter" aria-hidden="true"></i>
         </span>
         <span>Tweet</span>
       </a>
@@ -122,7 +122,7 @@ doc-subtab: navbar
     <p class="control">
       <a class="button is-primary">
         <span class="icon">
-          <i class="fa fa-download" aria-hidden="true"></i>
+          <i class="fas fa-download" aria-hidden="true"></i>
         </span>
         <span>Download</span>
       </a>
@@ -830,7 +830,7 @@ document.addEventListener('DOMContentLoaded', function () {
     <div id="navbarToggles" class="buttons">
       <a id="navbarFixBottom" class="button is-link">
         <span class="icon">
-          <i class="fa fa-square-o"></i>
+          <i class="far fa-square"></i>
         </span>
         <span>Show <strong>bottom</strong> navbar</span>
       </a>

diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html
index baecb078d20465657985c55f4bdc681a9bbeaf0a..87ed8d117a6ca094a1fb38e1e91522d30c3bd831 100644 (file)
--- a/docs/documentation/components/panel.html
+++ b/docs/documentation/components/panel.html
@@ -14,7 +14,7 @@ doc-subtab: panel
     <p class="control has-icons-left">
       <input class="input is-small" type="text" placeholder="search">
       <span class="icon is-small is-left">
-        <i class="fa fa-search"></i>
+        <i class="fas fa-search"></i>
       </span>
     </p>
   </div>
@@ -27,37 +27,37 @@ doc-subtab: panel
   </p>
   <a class="panel-block is-active">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     bulma
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     marksheet
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     minireset.css
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fas fa-book"></i>
     </span>
     jgthms.github.io
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-code-fork"></i>
+      <i class="fas fa-code-branch"></i>
     </span>
     daniellowtw/infboard
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-code-fork"></i>
+      <i class="fas fa-code-branch"></i>
     </span>
     mojs
   </a>

diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index 97dc2d2b60bf89a4ebd9acdd92b5db69761ebbff..b5df9f9d6416881344d9056aeba3b75248b90dff 100644 (file)
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -43,25 +43,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -107,25 +107,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -138,25 +138,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -169,25 +169,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -200,20 +200,20 @@ doc-subtab: tabs
   <ul>
     <li>
       <a>
-        <span class="icon"><i class="fa fa-angle-left"></i></span>
+        <span class="icon"><i class="fas fa-angle-left"></i></span>
         <span>Left</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fa fa-angle-up"></i></span>
+        <span class="icon"><i class="fas fa-angle-up"></i></span>
         <span>Up</span>
       </a>
     </li>
     <li>
       <a>
         <span>Right</span>
-        <span class="icon"><i class="fa fa-angle-right"></i></span>
+        <span class="icon"><i class="fas fa-angle-right"></i></span>
       </a>
     </li>
   </ul>
@@ -225,25 +225,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -256,25 +256,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -287,25 +287,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -318,25 +318,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon"><i class="fa fa-image"></i></span>
+        <span class="icon"><i class="fas fa-image"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fa fa-music"></i></span>
+        <span class="icon"><i class="fas fa-music"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fa fa-film"></i></span>
+        <span class="icon"><i class="fas fa-film"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fa fa-file-text-o"></i></span>
+        <span class="icon"><i class="fas fa-file-alt"></i></span>
         <span>Documents</span>
       </a>
     </li>

diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html
index 08cf34f168566f5867fe5cdc3b2b79c9f516a77d..ca924c5ff595fd121f26fdb460404b7adbfc0ae7 100644 (file)
--- a/docs/documentation/elements/box.html
+++ b/docs/documentation/elements/box.html
@@ -26,13 +26,13 @@ doc-subtab: box
       <nav class="level is-mobile">
         <div class="level-left">
           <a class="level-item">
-            <span class="icon is-small"><i class="fa fa-reply"></i></span>
+            <span class="icon is-small"><i class="fas fa-reply"></i></span>
           </a>
           <a class="level-item">
-            <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+            <span class="icon is-small"><i class="fas fa-retweet"></i></span>
           </a>
           <a class="level-item">
-            <span class="icon is-small"><i class="fa fa-heart"></i></span>
+            <span class="icon is-small"><i class="fas fa-heart"></i></span>
           </a>
         </div>
       </nav>

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index c8a0157c3bf0e7d3dbf1fd8f41c317066416b2d5..7352e7c4ef4955169c2970c46bafecbaf21113fe 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -142,68 +142,68 @@ doc-subtab: button
 <p class="field">
   <a class="button">
     <span class="icon is-small">
-      <i class="fa fa-bold"></i>
+      <i class="fas fa-bold"></i>
     </span>
   </a>
   <a class="button">
     <span class="icon is-small">
-      <i class="fa fa-italic"></i>
+      <i class="fas fa-italic"></i>
     </span>
   </a>
   <a class="button">
     <span class="icon is-small">
-      <i class="fa fa-underline"></i>
+      <i class="fas fa-underline"></i>
     </span>
   </a>
 </p>
 <p class="field">
   <a class="button">
     <span class="icon">
-      <i class="fa fa-github"></i>
+      <i class="fab fa-github"></i>
     </span>
     <span>GitHub</span>
   </a>
   <a class="button is-primary">
     <span class="icon">
-      <i class="fa fa-twitter"></i>
+      <i class="fab fa-twitter"></i>
     </span>
     <span>Twitter</span>
   </a>
   <a class="button is-success">
     <span class="icon is-small">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
     <span>Save</span>
   </a>
   <a class="button is-danger is-outlined">
     <span>Delete</span>
     <span class="icon is-small">
-      <i class="fa fa-times"></i>
+      <i class="fas fa-times"></i>
     </span>
   </a>
 </p>
 <p class="field">
   <a class="button is-small">
     <span class="icon is-small">
-      <i class="fa fa-github"></i>
+      <i class="fab fa-github"></i>
     </span>
     <span>GitHub</span>
   </a>
   <a class="button">
     <span class="icon">
-      <i class="fa fa-github"></i>
+      <i class="fab fa-github"></i>
     </span>
     <span>GitHub</span>
   </a>
   <a class="button is-medium">
     <span class="icon">
-      <i class="fa fa-github"></i>
+      <i class="fab fa-github"></i>
     </span>
     <span>GitHub</span>
   </a>
   <a class="button is-large">
     <span class="icon is-medium">
-      <i class="fa fa-github"></i>
+      <i class="fab fa-github"></i>
     </span>
     <span>GitHub</span>
   </a>
@@ -214,53 +214,53 @@ doc-subtab: button
 <p class="field">
   <a class="button is-small">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fas fa-heading"></i>
     </span>
   </a>
 </p>
 <p class="field">
   <a class="button">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fas fa-heading"></i>
     </span>
   </a>
   <a class="button">
   <span class="icon">
-    <i class="fa fa-header fa-lg"></i>
+    <i class="fas fa-heading fa-lg"></i>
   </span>
   </a>
 </p>
 <p class="field">
   <a class="button is-medium">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fas fa-heading"></i>
     </span>
   </a>
   <a class="button is-medium">
   <span class="icon">
-    <i class="fa fa-header fa-lg"></i>
+    <i class="fas fa-heading fa-lg"></i>
   </span>
   </a>
   <a class="button is-medium">
     <span class="icon is-medium">
-      <i class="fa fa-header fa-2x"></i>
+      <i class="fas fa-heading fa-2x"></i>
     </span>
   </a>
 </p>
 <p class="field">
   <a class="button is-large">
     <span class="icon is-small">
-      <i class="fa fa-header"></i>
+      <i class="fas fa-heading"></i>
     </span>
   </a>
   <a class="button is-large">
   <span class="icon">
-    <i class="fa fa-header fa-lg"></i>
+    <i class="fas fa-heading fa-lg"></i>
   </span>
   </a>
   <a class="button is-large">
     <span class="icon is-medium">
-      <i class="fa fa-header fa-2x"></i>
+      <i class="fas fa-heading fa-2x"></i>
     </span>
   </a>
 </p>
@@ -291,7 +291,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-align-left"></i>
+        <i class="fas fa-align-left"></i>
       </span>
       <span>Left</span>
     </a>
@@ -299,7 +299,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-align-center"></i>
+        <i class="fas fa-align-center"></i>
       </span>
       <span>Center</span>
     </a>
@@ -307,7 +307,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-align-right"></i>
+        <i class="fas fa-align-right"></i>
       </span>
       <span>Right</span>
     </a>
@@ -320,7 +320,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-bold"></i>
+        <i class="fas fa-bold"></i>
       </span>
       <span>Bold</span>
     </a>
@@ -328,7 +328,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-italic"></i>
+        <i class="fas fa-italic"></i>
       </span>
       <span>Italic</span>
     </a>
@@ -336,7 +336,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-underline"></i>
+        <i class="fas fa-underline"></i>
       </span>
       <span>Underline</span>
     </a>
@@ -347,7 +347,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-align-left"></i>
+        <i class="fas fa-align-left"></i>
       </span>
       <span>Left</span>
     </a>
@@ -355,7 +355,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-align-center"></i>
+        <i class="fas fa-align-center"></i>
       </span>
       <span>Center</span>
     </a>
@@ -363,7 +363,7 @@ doc-subtab: button
   <p class="control">
     <a class="button">
       <span class="icon is-small">
-        <i class="fa fa-align-right"></i>
+        <i class="fas fa-align-right"></i>
       </span>
       <span>Right</span>
     </a>

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index 31e2d215d224077488605bba7d283faacdf9b07f..49fc0d95158fd551ff9b3fe84afcf66ce5c47b5d 100644 (file)
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -1,5 +1,6 @@
 ---
 title: Icon
+fontawesome4: true
 iconic: true
 ionicons: true
 mdi: true

diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index 6f4fb72765d93c5d764980cf2a54569ba402de4e..bdabaaa05792539661b5946aaa381af0a37540b9 100644 (file)
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -23,7 +23,7 @@ variables_keys:
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
       <span class="file-icon">
-        <i class="fa fa-upload"></i>
+        <i class="fas fa-upload"></i>
       </span>
       <span class="file-label">
         Choose a file…
@@ -39,7 +39,7 @@ variables_keys:
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
       <span class="file-icon">
-        <i class="fa fa-upload"></i>
+        <i class="fas fa-upload"></i>
       </span>
       <span class="file-label">
         Choose a file…
@@ -58,7 +58,7 @@ variables_keys:
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
       <span class="file-icon">
-        <i class="fa fa-upload"></i>
+        <i class="fas fa-upload"></i>
       </span>
       <span class="file-label">
         Choose a file…
@@ -77,7 +77,7 @@ variables_keys:
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
       <span class="file-icon">
-        <i class="fa fa-upload"></i>
+        <i class="fas fa-upload"></i>
       </span>
       <span class="file-label">
         Choose a file…
@@ -96,7 +96,7 @@ variables_keys:
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
       <span class="file-icon">
-        <i class="fa fa-upload"></i>
+        <i class="fas fa-upload"></i>
       </span>
       <span class="file-label">
         Choose a file…
@@ -112,7 +112,7 @@ variables_keys:
     <input class="file-input" type="file" name="resume">
     <span class="file-cta">
       <span class="file-icon">
-        <i class="fa fa-upload"></i>
+        <i class="fas fa-upload"></i>
       </span>
       <span class="file-label">
         Choose a file…
@@ -132,7 +132,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Primary file…
@@ -148,7 +148,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Info file…
@@ -167,7 +167,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-cloud-upload"></i>
+          <i class="fas fa-cloud-upload-alt"></i>
         </span>
         <span class="file-label">
           Warning file…
@@ -183,7 +183,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-cloud-upload"></i>
+          <i class="fas fa-cloud-upload-alt"></i>
         </span>
         <span class="file-label">
           Danger file…
@@ -204,7 +204,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Small file…
@@ -220,7 +220,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Normal file…
@@ -236,7 +236,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Medium file…
@@ -252,7 +252,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Large file…
@@ -270,7 +270,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Small file…
@@ -289,7 +289,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Normal file…
@@ -308,7 +308,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Medium file…
@@ -327,7 +327,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Large file…
@@ -348,7 +348,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Small file…
@@ -364,7 +364,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Normal file…
@@ -380,7 +380,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Medium file…
@@ -396,7 +396,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Large file…
@@ -414,7 +414,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Centered file…
@@ -435,7 +435,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Right file…
@@ -456,7 +456,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Small file…
@@ -475,7 +475,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Normal file…
@@ -494,7 +494,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Medium file…
@@ -513,7 +513,7 @@ variables_keys:
       <input class="file-input" type="file" name="resume">
       <span class="file-cta">
         <span class="file-icon">
-          <i class="fa fa-upload"></i>
+          <i class="fas fa-upload"></i>
         </span>
         <span class="file-label">
           Large file…

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 6e19067665f3151c739d7249d9314dd12fee5fdb..569465a288eece694d48a8e035abcb7bcde125f4 100644 (file)
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -27,10 +27,10 @@ variables_form_keys:
   <div class="control has-icons-left has-icons-right">
     <input class="input is-success" type="text" placeholder="Text input" value="bulma">
     <span class="icon is-small is-left">
-      <i class="fa fa-user"></i>
+      <i class="fas fa-user"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </div>
   <p class="help is-success">This username is available</p>
@@ -41,10 +41,10 @@ variables_form_keys:
   <div class="control has-icons-left has-icons-right">
     <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-warning"></i>
+      <i class="fas fa-exclamation-triangle"></i>
     </span>
   </div>
   <p class="help is-danger">This email is invalid</p>
@@ -155,10 +155,10 @@ variables_form_keys:
   <p class="control has-icons-left has-icons-right">
     <input class="input" type="email" placeholder="Email">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </p>
 </div>
@@ -166,7 +166,7 @@ variables_form_keys:
   <p class="control has-icons-left">
     <input class="input" type="password" placeholder="Password">
     <span class="icon is-small is-left">
-      <i class="fa fa-lock"></i>
+      <i class="fas fa-lock"></i>
     </span>
   </p>
 </div>
@@ -190,7 +190,7 @@ variables_form_keys:
       </select>
     </span>
     <span class="icon is-small is-left">
-      <i class="fa fa-globe"></i>
+      <i class="fas fa-globe"></i>
     </span>
   </p>
 </div>
@@ -200,12 +200,12 @@ variables_form_keys:
 <div class="field">
   <label class="label is-small">Small input</label>
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-small" type="email" placeholder="Email">
+    <input class="input is-small" type="email" placeholder="Normal">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </div>
 </div>
@@ -215,24 +215,24 @@ variables_form_keys:
 <div class="field">
   <label class="label">Normal input</label>
   <div class="control has-icons-left has-icons-right">
-    <input class="input" type="email" placeholder="Email">
+    <input class="input" type="email" placeholder="Extra small">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope fa-xs"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check fa-xs"></i>
     </span>
   </div>
 </div>
 
 <div class="field">
   <div class="control has-icons-left has-icons-right">
-    <input class="input" type="email" placeholder="Email">
+    <input class="input" type="email" placeholder="Normal">
     <span class="icon is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </div>
 </div>
@@ -242,36 +242,36 @@ variables_form_keys:
 <div class="field">
   <label class="label is-medium">Medium input</label>
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-medium" type="email" placeholder="Email">
+    <input class="input is-medium" type="email" placeholder="Extra small">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope fa-xs"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check fa-xs"></i>
     </span>
   </div>
 </div>
 
 <div class="field">
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-medium" type="email" placeholder="Email">
+    <input class="input is-medium" type="email" placeholder="Small">
     <span class="icon is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope fa-sm"></i>
     </span>
     <span class="icon is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check fa-sm"></i>
     </span>
   </div>
 </div>
 
 <div class="field">
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-medium" type="email" placeholder="Email">
+    <input class="input is-medium" type="email" placeholder="Normal">
     <span class="icon is-medium is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-medium is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </div>
 </div>
@@ -281,48 +281,48 @@ variables_form_keys:
 <div class="field">
   <label class="label is-large">Large input</label>
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-large" type="email" placeholder="Email">
+    <input class="input is-large" type="email" placeholder="Extra small">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope fa-xs"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check fa-xs"></i>
     </span>
   </div>
 </div>
 
 <div class="field">
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-large" type="email" placeholder="Email">
+    <input class="input is-large" type="email" placeholder="Small">
     <span class="icon is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope fa-sm"></i>
     </span>
     <span class="icon is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check fa-sm"></i>
     </span>
   </div>
 </div>
 
 <div class="field">
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-large" type="email" placeholder="Email">
-    <span class="icon is-medium is-left">
-      <i class="fa fa-envelope"></i>
+    <input class="input is-large" type="email" placeholder="Normal">
+    <span class="icon is-large is-left">
+      <i class="fas fa-envelope"></i>
     </span>
-    <span class="icon is-medium is-right">
-      <i class="fa fa-check"></i>
+    <span class="icon is-large is-right">
+      <i class="fas fa-check"></i>
     </span>
   </div>
 </div>
 
 <div class="field">
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-large" type="email" placeholder="Email">
-    <span class="icon is-large is-left">
-      <i class="fa fa-envelope"></i>
+    <input class="input is-large" type="email" placeholder="Large">
+    <span class="icon is-medium is-left">
+      <i class="fas fa-envelope fa-lg"></i>
     </span>
-    <span class="icon is-large is-right">
-      <i class="fa fa-check"></i>
+    <span class="icon is-medium is-right">
+      <i class="fas fa-check fa-lg"></i>
     </span>
   </div>
 </div>
@@ -604,7 +604,7 @@ variables_form_keys:
       <p class="control is-expanded has-icons-left">
         <input class="input" type="text" placeholder="Name">
         <span class="icon is-small is-left">
-          <i class="fa fa-user"></i>
+          <i class="fas fa-user"></i>
         </span>
       </p>
     </div>
@@ -612,10 +612,10 @@ variables_form_keys:
       <p class="control is-expanded has-icons-left has-icons-right">
         <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
         <span class="icon is-small is-left">
-          <i class="fa fa-envelope"></i>
+          <i class="fas fa-envelope"></i>
         </span>
         <span class="icon is-small is-right">
-          <i class="fa fa-check"></i>
+          <i class="fas fa-check"></i>
         </span>
       </p>
     </div>

diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index c478a6e7522318e5db0101b248afecf31d220616..7fa51dc133ca4d2d17d8b0c907d1ca393275b4ab 100644 (file)
--- a/docs/documentation/form/input.html
+++ b/docs/documentation/form/input.html
@@ -174,10 +174,10 @@ variables_keys:
   <p class="control has-icons-left has-icons-right">
     <input class="input" type="email" placeholder="Email">
     <span class="icon is-small is-left">
-      <i class="fa fa-envelope"></i>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-small is-right">
-      <i class="fa fa-check"></i>
+      <i class="fas fa-check"></i>
     </span>
   </p>
 </div>
@@ -185,7 +185,7 @@ variables_keys:
   <p class="control has-icons-left">
     <input class="input" type="password" placeholder="Password">
     <span class="icon is-small is-left">
-      <i class="fa fa-lock"></i>
+      <i class="fas fa-lock"></i>
     </span>
   </p>
 </div>
@@ -195,10 +195,10 @@ variables_keys:
 <div class="control has-icons-left has-icons-right">
   <input class="input is-small" type="email" placeholder="Email">
   <span class="icon is-small is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-envelope"></i>
   </span>
   <span class="icon is-small is-right">
-    <i class="fa fa-check"></i>
+    <i class="fas fa-check"></i>
   </span>
 </div>
 {% endcapture %}
@@ -207,10 +207,10 @@ variables_keys:
 <div class="control has-icons-left has-icons-right">
   <input class="input" type="email" placeholder="Email">
   <span class="icon is-small is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-envelope"></i>
   </span>
   <span class="icon is-small is-right">
-    <i class="fa fa-check"></i>
+    <i class="fas fa-check"></i>
   </span>
 </div>
 {% endcapture %}
@@ -219,10 +219,10 @@ variables_keys:
 <div class="control has-icons-left has-icons-right">
   <input class="input is-medium" type="email" placeholder="Email">
   <span class="icon is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-envelope"></i>
   </span>
   <span class="icon is-right">
-    <i class="fa fa-check"></i>
+    <i class="fas fa-check"></i>
   </span>
 </div>
 {% endcapture %}
@@ -231,10 +231,10 @@ variables_keys:
 <div class="control has-icons-left has-icons-right">
   <input class="input is-large" type="email" placeholder="Email">
   <span class="icon is-medium is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-envelope"></i>
   </span>
   <span class="icon is-medium is-right">
-    <i class="fa fa-check"></i>
+    <i class="fas fa-check"></i>
   </span>
 </div>
 {% endcapture %}

diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html
index a3361136298f3bda9069acddc32b72723a3e9102..eb9bd04d4a1d5213a360c28707cf05c2a9ab5821 100644 (file)
--- a/docs/documentation/form/select.html
+++ b/docs/documentation/form/select.html
@@ -204,7 +204,7 @@ doc-subtab: select
       </select>
     </div>
     <div class="icon is-small is-left">
-      <i class="fa fa-globe"></i>
+      <i class="fas fa-globe"></i>
     </div>
   </div>
 </div>
@@ -220,7 +220,7 @@ doc-subtab: select
     </select>
   </div>
   <span class="icon is-small is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-globe"></i>
   </span>
 </div>
 {% endcapture %}
@@ -235,7 +235,7 @@ doc-subtab: select
     </select>
   </div>
   <span class="icon is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-globe"></i>
   </span>
 </div>
 {% endcapture %}
@@ -250,7 +250,7 @@ doc-subtab: select
     </select>
   </div>
   <span class="icon is-medium is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-globe"></i>
   </span>
 </div>
 {% endcapture %}
@@ -265,7 +265,7 @@ doc-subtab: select
     </select>
   </div>
   <span class="icon is-large is-left">
-    <i class="fa fa-envelope"></i>
+    <i class="fas fa-globe"></i>
   </span>
 </div>
 {% endcapture %}

diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
index 081002addc1cde163c67d7bafa64f0c083952e41..b11797fb2c4c9d0515ce78bdd9915f0f198fe410 100644 (file)
--- a/docs/documentation/layout/hero.html
+++ b/docs/documentation/layout/hero.html
@@ -457,7 +457,7 @@ doc-subtab: hero
             <span class="navbar-item">
               <a class="button is-primary is-inverted">
                 <span class="icon">
-                  <i class="fa fa-github"></i>
+                  <i class="fab fa-github"></i>
                 </span>
                 <span>Download</span>
               </a>
@@ -527,7 +527,7 @@ doc-subtab: hero
             <span class="navbar-item">
               <a class="button is-info is-inverted">
                 <span class="icon">
-                  <i class="fa fa-github"></i>
+                  <i class="fab fa-github"></i>
                 </span>
                 <span>Download</span>
               </a>
@@ -608,7 +608,7 @@ doc-subtab: hero
             <span class="navbar-item">
               <a class="button is-success is-inverted">
                 <span class="icon">
-                  <i class="fa fa-github"></i>
+                  <i class="fab fa-github"></i>
                 </span>
                 <span>Download</span>
               </a>

diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html
index 1098a18fba0f71da05b5f9436c3e9805247faedc..ec5aed7d0cfe0ebe7dd8627f6ffe49214a8a83f7 100644 (file)
--- a/docs/documentation/layout/media-object.html
+++ b/docs/documentation/layout/media-object.html
@@ -23,13 +23,13 @@ doc-subtab: media-object
     <nav class="level is-mobile">
       <div class="level-left">
         <a class="level-item">
-          <span class="icon is-small"><i class="fa fa-reply"></i></span>
+          <span class="icon is-small"><i class="fas fa-reply"></i></span>
         </a>
         <a class="level-item">
-          <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+          <span class="icon is-small"><i class="fas fa-retweet"></i></span>
         </a>
         <a class="level-item">
-          <span class="icon is-small"><i class="fa fa-heart"></i></span>
+          <span class="icon is-small"><i class="fas fa-heart"></i></span>
         </a>
       </div>
     </nav>
@@ -187,13 +187,13 @@ doc-subtab: media-object
           <nav class="level">
             <div class="level-left">
               <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-reply"></i></span>
+                <span class="icon is-small"><i class="fas fa-reply"></i></span>
               </a>
               <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+                <span class="icon is-small"><i class="fas fa-retweet"></i></span>
               </a>
               <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-heart"></i></span>
+                <span class="icon is-small"><i class="fas fa-heart"></i></span>
               </a>
             </div>
           </nav>

diff --git a/docs/expo.html b/docs/expo.html
index 466e2063020401e1057fe3cb99296b32f77653b2..08219571cc005d5890386e161129755e2f370f4d 100644 (file)
--- a/docs/expo.html
+++ b/docs/expo.html
@@ -86,7 +86,7 @@ websites:
       target="_blank"
       href="https://twitter.com/intent/tweet?text={{ 'Here is my lovely website!' | urlencode }}&hashtags=madewithbulma&url={{ site.url }}">
       <span class="icon">
-        <i class="fa fa-twitter"></i>
+        <i class="fab fa-twitter"></i>
       </span>
       <span>
         #madewithbulma

diff --git a/docs/index.html b/docs/index.html
index ffb7a62d2998bb083ef0b76597dbe29c421992c2..f587c6bfd244f67407a396e2188a34c0dd0e4a6c 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,34 +14,34 @@ fixed_navbar: true
       <nav class="columns">
         <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
           <span class="icon is-large" style="margin-right: -15px;">
-            <i class="fa fa-3x fa-mobile"></i>
+            <i class="fas fa-lg fa-mobile-alt"></i>
           </span>
           <span class="icon is-large">
-            <i class="fa fa-3x fa-tablet"></i>
+            <i class="fas fa-2x fa-tablet-alt"></i>
           </span>
           <span class="icon is-large" style="margin-right: 10px;">
-            <i class="fa fa-3x fa-desktop"></i>
+            <i class="fas fa-3x fa-desktop"></i>
           </span>
           <p class="title is-4" style="margin-top: 0.5em;"><strong>100% Responsive</strong></p>
           <p class="subtitle">Designed for <strong>mobile</strong> first</p>
         </a>
         <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
           <span class="icon is-large">
-            <i class="fa fa-3x fa-cubes"></i>
+            <i class="fas fa-3x fa-cubes"></i>
           </span>
           <p class="title is-4" style="margin-top: 0.5em;"><strong>Modular</strong></p>
           <p class="subtitle">Just import what you <strong>need</strong></p>
         </a>
         <a class="column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
           <span class="icon is-large">
-            <i class="fa fa-3x fa-css3"></i>
+            <i class="fab fa-3x fa-css3"></i>
           </span>
           <p class="title is-4" style="margin-top: 0.5em;"><strong>Modern</strong></p>
           <p class="subtitle">Built with <strong>Flexbox</strong></p>
         </a>
         <a class="column has-text-centered" href="{{ site.github }}">
           <span class="icon is-large">
-            <i class="fa fa-3x fa-github"></i>
+            <i class="fab fa-3x fa-github"></i>
           </span>
           <p class="title is-4" style="margin-top: 0.5em;"><strong>Free</strong></p>
           <p class="subtitle">Open source on <strong>GitHub</strong></p>
@@ -59,7 +59,7 @@ fixed_navbar: true
   <div class="container">
     <h3 class="title is-2">
       <span class="icon is-medium">
-        <i class="fa fa-pause"></i>
+        <i class="fas fa-pause"></i>
       </span>
       <a href="{{ site.url }}/documentation/columns/basics">
         Simple <strong>columns</strong>
@@ -161,7 +161,7 @@ fixed_navbar: true
   <div class="container">
     <h3 class="title is-2">
       <span class="icon is-medium">
-        <i class="fa fa-th-large"></i>
+        <i class="fas fa-th-large"></i>
       </span>
       <a href="{{ site.url }}/documentation/layout/tiles">
         Magic <strong>tiles</strong>
@@ -255,7 +255,7 @@ fixed_navbar: true
   <div class="container">
     <h3 class="title is-2">
       <span class="icon is-medium">
-        <i class="fa fa-arrows-h"></i>
+        <i class="fas fa-arrows-alt-h"></i>
       </span>
       <a href="{{ site.url }}/documentation/layout/level/">
         Flexible <strong>horizontal level</strong>
@@ -323,7 +323,7 @@ fixed_navbar: true
       <div class="column">
         <h3 class="title is-2">
           <span class="icon is-medium">
-            <i class="fa fa-magic"></i>
+            <i class="fas fa-magic"></i>
           </span>
           <a href="{{ site.url }}/documentation/layout/media-object/">
             Versatile <strong>media object</strong>
@@ -351,13 +351,13 @@ fixed_navbar: true
               <nav class="level is-mobile">
                 <div class="level-left">
                   <a class="level-item">
-                    <span class="icon is-small"><i class="fa fa-reply"></i></span>
+                    <span class="icon is-small"><i class="fas fa-reply"></i></span>
                   </a>
                   <a class="level-item">
-                    <span class="icon is-small"><i class="fa fa-retweet"></i></span>
+                    <span class="icon is-small"><i class="fas fa-retweet"></i></span>
                   </a>
                   <a class="level-item">
-                    <span class="icon is-small"><i class="fa fa-heart"></i></span>
+                    <span class="icon is-small"><i class="fas fa-heart"></i></span>
                   </a>
                 </div>
               </nav>
@@ -384,7 +384,7 @@ fixed_navbar: true
     <div class="container has-text-centered">
       <h3 class="title is-2">
         <span class="icon is-medium">
-          <i class="fa fa-arrows-v"></i>
+          <i class="fas fa-arrows-v"></i>
         </span>
         <a href="{{ site.url }}/documentation/layout/hero/">
           Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
@@ -411,7 +411,7 @@ fixed_navbar: true
       <div class="column">
         <h3 class="title is-2">
           <span class="icon is-medium">
-            <i class="fa fa-cogs"></i>
+            <i class="fas fa-cogs"></i>
           </span>
           <a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
             Compose your element with <strong>modifier</strong> classes
@@ -463,7 +463,7 @@ fixed_navbar: true
   <div class="container">
     <h3 class="title is-2">
       <span class="icon is-medium">
-        <i class="fa fa-asterisk"></i>
+        <i class="fas fa-asterisk"></i>
       </span>
       <a href="{{ site.url }}/documentation/elements/box/">
         And all the usual <strong>elements</strong> and <strong>components</strong>
@@ -482,13 +482,13 @@ fixed_navbar: true
     <div class="hero-buttons">
       <a class="button is-link is-large" href="{{ site.documentation }}">
         <span class="icon">
-          <i class="fa fa-book"></i>
+          <i class="fas fa-book"></i>
         </span>
         <span>Check the <strong>docs</strong></span>
       </a>
       <a class="button is-black is-large" href="{{ site.github }}">
         <span class="icon">
-          <i class="fa fa-github"></i>
+          <i class="fab fa-github"></i>
         </span>
         <span>Contribute</span>
       </a>