mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add new icon text blog post
This commit is contained in:
parent
696621d028
commit
3ceb3213a7
@ -4,6 +4,7 @@
|
|||||||
{{ include.surtitle }}
|
{{ include.surtitle }}
|
||||||
</p>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<h2 class="bd-link-name">
|
<h2 class="bd-link-name">
|
||||||
<figure class="bd-link-figure">
|
<figure class="bd-link-figure">
|
||||||
{% if include.icon %}
|
{% if include.icon %}
|
||||||
@ -21,9 +22,11 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{{ include.name }}
|
{{ include.name }}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="bd-link-subtitle">
|
|
||||||
|
<div class="bd-link-subtitle">
|
||||||
{{ include.subtitle }}
|
{{ include.subtitle }}
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
{% if include.more %}
|
{% if include.more %}
|
||||||
<div class="bd-link-more">
|
<div class="bd-link-more">
|
||||||
{{ include.more }}
|
{{ include.more }}
|
||||||
|
@ -58,7 +58,7 @@ breadcrumb:
|
|||||||
<header class="bd-header">
|
<header class="bd-header">
|
||||||
<div class="bd-header-titles">
|
<div class="bd-header-titles">
|
||||||
<h1 class="title">
|
<h1 class="title">
|
||||||
{{ page.title }}
|
{{ page.title | markdownify }}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="subtitle is-4">
|
<p class="subtitle is-4">
|
||||||
{{ page.date | date_to_string }}
|
{{ page.date | date_to_string }}
|
||||||
@ -81,13 +81,13 @@ breadcrumb:
|
|||||||
<nav class="bd-prev-next-bis">
|
<nav class="bd-prev-next-bis">
|
||||||
{% if page.previous.url %}
|
{% if page.previous.url %}
|
||||||
<a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
|
<a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
|
||||||
← {{ page.previous.title }}
|
← {{ page.previous.name }}
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.next.url %}
|
{% if page.next.url %}
|
||||||
<a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
|
<a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
|
||||||
{{ page.next.title }} →
|
{{ page.next.name }} →
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</nav>
|
</nav>
|
||||||
|
49
docs/_posts/2021-01-12-new-feature-icon-text.md
Normal file
49
docs/_posts/2021-01-12-new-feature-icon-text.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
title: "New feature: `.icon-text`"
|
||||||
|
layout: post
|
||||||
|
introduction: "An easy way to combine an `.icon` with text"
|
||||||
|
color: "primary"
|
||||||
|
name: "New feature: Icon Text"
|
||||||
|
icon: "star-of-life"
|
||||||
|
---
|
||||||
|
|
||||||
|
Bulma's `.icon` element has been around since its inception. It acts as a simple container for any **icon font**. And thanks to its fixed square dimensions, it provides the icon font time to load while preserving the space fo it.
|
||||||
|
|
||||||
|
From version `0.9.2`, a new `.icon-text` element will be available. It allows you to easily combine an `.icon` element with **text**. The purpose of this new feature is to preserve the correct **alignment** of both parts.
|
||||||
|
|
||||||
|
<div class="block has-text-centered py-6">
|
||||||
|
<span class="icon-text">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-home"></i>
|
||||||
|
</span>
|
||||||
|
<span>Home</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
You can combine several icons in sequence:
|
||||||
|
|
||||||
|
<div class="block has-text-centered py-6">
|
||||||
|
<span class="icon-text">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-train"></i>
|
||||||
|
</span>
|
||||||
|
<span>Paris</span>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</span>
|
||||||
|
<span>Budapest</span>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</span>
|
||||||
|
<span>Bucharest</span>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-arrow-right"></i>
|
||||||
|
</span>
|
||||||
|
<span>Istanbul</span>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fas fa-flag-checkered"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
See the [full `.icon-text` documentation](/documentation/elements/icon/#icon-text).
|
@ -39,7 +39,8 @@ breadcrumb:
|
|||||||
<div class="bd-links">
|
<div class="bd-links">
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
{% assign date = post.date | date: "%B %-d" %}
|
{% assign date = post.date | date: "%B %-d" %}
|
||||||
{% assign more = post.introduction | markdownify | strip_html %}
|
{% assign name = post.title | markdownify %}
|
||||||
|
{% assign more = post.introduction | markdownify %}
|
||||||
{%
|
{%
|
||||||
include elements/link.html
|
include elements/link.html
|
||||||
path=post.url
|
path=post.url
|
||||||
@ -48,7 +49,7 @@ breadcrumb:
|
|||||||
icon_regular=post.icon_regular
|
icon_regular=post.icon_regular
|
||||||
icon=post.icon
|
icon=post.icon
|
||||||
surtitle=date
|
surtitle=date
|
||||||
name=post.name
|
name=name
|
||||||
subtitle=more
|
subtitle=more
|
||||||
%}
|
%}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
Loading…
Reference in New Issue
Block a user