Add Font Awesome 5 blog post

This commit is contained in:
Jeremy Thomas 2018-01-18 16:59:05 +00:00
parent 9a3dad689b
commit aba1664488
4 changed files with 45 additions and 20 deletions

View File

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

View File

@ -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**:

View File

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

View File

@ -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/).