Use Font Awesome 5

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/"

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"
+}

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>

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 }}

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>

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>

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>

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>

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">

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">

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>

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>

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>

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">

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);

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');
     }

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>

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>

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):

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

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

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"
+  icon: "font-awesome"
-  title: "Font Awesome support"
+  icon_brand: true
-  content: "Bulma is compatible with [Font Awesome](http://fontawesome.io/) thanks to the `.icon` element."
+  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" %}
-      {% include navbar.html id="Documentation" %}
-    </div>
 
     <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
                 %}

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>

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;
 }

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="fas 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="fas 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><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="fa fa-thumbs-up" aria-hidden="true"></i></span><span>Breadcrumb</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 %}

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>

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>

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>

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>

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>

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>

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>

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>

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>

docs/documentation/elements/icon.html

@@ -1,5 +1,6 @@
 ---
 title: Icon
+fontawesome4: true
 iconic: true
 ionicons: true
 mdi: true

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…

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">
+    <input class="input is-large" type="email" placeholder="Normal">
-    <span class="icon is-medium is-left">
-      <i class="fa fa-envelope"></i>
-    </span>
-    <span class="icon is-medium is-right">
-      <i class="fa 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>
+      <i class="fas fa-envelope"></i>
     </span>
     <span class="icon is-large is-right">
-      <i class="fa fa-check"></i>
+      <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="Large">
+    <span class="icon is-medium is-left">
+      <i class="fas fa-envelope fa-lg"></i>
+    </span>
+    <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>

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 %}

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 %}

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>

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>

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

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>