From aba166448837e5e6f631c13d3025d4f01e233071 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Thu, 18 Jan 2018 16:59:05 +0000
Subject: [PATCH] Add Font Awesome 5 blog post

---
 docs/_layouts/post.html                       | 37 ++++++++++---------
 docs/_posts/2017-10-22-list-of-buttons.md     |  2 +-
 docs/_posts/2017-11-01-fixed-navbar.md        |  2 +-
 ...018-01-18-bulma-supports-font-awesome-5.md | 24 ++++++++++++
 4 files changed, 45 insertions(+), 20 deletions(-)
 create mode 100644 docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index 5503d326..ada1544b 100644
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -3,30 +3,31 @@ layout: default
 route: blog
 ---
 
-{% include blog-hero.html %}
+{% include navbar.html id="BlogHero" %}
+
+<div class="bd-article-image is-single is-{{ page.color }}">
+  <span class="bd-article-overlay"></span>
+  <span class="bd-article-icon">
+    <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
+  </span>
+  <strong class="bd-article-info">
+    <span>
+      <time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
+        {{ page.date | date_to_string }}
+      </time>
+      <strong class="bd-article-title">
+        {{ page.name }}
+      </strong>
+    </span>
+  </strong>
+</div>
 
 <section class="section">
   <div class="container">
     <div class="columns">
       <div class="column is-offset-2 is-8">
-        <div class="bd-article-image is-single is-{{ page.color }}">
-          <span class="bd-article-overlay"></span>
-          <span class="bd-article-icon">
-            <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
-          </span>
-          <strong class="bd-article-info">
-            <span>
-              <time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
-                {{ page.date | date_to_string }}
-              </time>
-              <strong class="bd-article-title">
-                {{ page.name }}
-              </strong>
-            </span>
-          </strong>
-        </div>
         <p class="subtitle is-6">
-          <a class="bd-article-back" href="{{ site.url }}/blog">Back</a>
+          <a class="bd-article-back" href="{{ site.url }}/blog">Back to Blog home</a>
         </p>
         <h1 class="title is-2">
           {{ page.title }}
diff --git a/docs/_posts/2017-10-22-list-of-buttons.md b/docs/_posts/2017-10-22-list-of-buttons.md
index 3afc4b16..760ee2ec 100644
--- a/docs/_posts/2017-10-22-list-of-buttons.md
+++ b/docs/_posts/2017-10-22-list-of-buttons.md
@@ -4,7 +4,7 @@ title: "New feature: list of buttons"
 introduction: "What's better than one button? Multiple buttons!"
 color: "danger"
 name: "List of buttons"
-icon: "hand-pointer-o"
+icon: "hand-pointer"
 ---
 
 Similarly to the [list of tags](/2017/08/03/list-of-tags/) launched a few months ago, the [button](/documentation/elements/button/) has its own **list of buttons**:
diff --git a/docs/_posts/2017-11-01-fixed-navbar.md b/docs/_posts/2017-11-01-fixed-navbar.md
index fc5fe322..16311c0f 100644
--- a/docs/_posts/2017-11-01-fixed-navbar.md
+++ b/docs/_posts/2017-11-01-fixed-navbar.md
@@ -2,7 +2,7 @@
 layout: post
 title: "New feature: fixed navbar"
 introduction: "Fix your navbar at the top or bottom"
-color: "info"
+color: "success"
 name: "Fixed navbar"
 icon: "map-pin"
 ---
diff --git a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
new file mode 100644
index 00000000..1e0fd6b3
--- /dev/null
+++ b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
@@ -0,0 +1,24 @@
+---
+title: "Bulma supports Font Awesome&nbsp;5"
+layout: post
+introduction: "No change required!"
+color: "info"
+name: "Font Awesome 5"
+icon: "font-awesome-alt"
+icon_brand: true
+---
+
+Bulma is **icon library agnostic**: this means that you can use _any_ icon font library (like Font Awesome 4 or 5, Material Design Icons, Open Iconic, Ionicons…) with Bulma's `icon` class.
+
+As a result, **Bulma already supports Font Awesome 5**! 😃
+
+Since the `icon` element is simply a **container** for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5.
+
+For the sake of being in sync with Bulima users, I've recently updated the website to actually use Font Awesome 5! The process of **migrating** from Font Awesome 4 to 5 is straightforward. You simply need to:
+
+1. include Font Awesome 5 instead, [using the script tag](https://fontawesome.com/get-started)
+2. replace `fa` classes with their `fas` and `fab` equivalents
+
+That's it!
+
+Check out the [icon documentation](/documentation/elements/icon/).
\ No newline at end of file