mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add Font Awesome 5 blog post
This commit is contained in:
parent
9a3dad689b
commit
aba1664488
@ -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 }}
|
||||
|
@ -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**:
|
||||
|
@ -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"
|
||||
---
|
||||
|
24
docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
Normal file
24
docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "Bulma supports Font Awesome 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/).
|
Loading…
Reference in New Issue
Block a user