library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use Font Awesome 5

Browse Source
This commit is contained in:
Jeremy Thomas 2018-01-10 16:30:23 +00:00
parent cc96e3cc7c
commit 3158236eb7
43 changed files with 303 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/_config.yml
View File

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

7
docs/_data/icons.json Normal file
View File

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

2
docs/_includes/blog-hero.html
View File

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

2
docs/_includes/elements/tw-button.html
View File

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

4
docs/_includes/examples/navbar-bottom.html
View File

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

4
docs/_includes/examples/navbar-color.html
View File

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

4
docs/_includes/examples/navbar.html
View File

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

36
docs/_includes/features.html
View File

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

2
docs/_includes/footer.html
View File

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

2
docs/_includes/getting-started.html
View File

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

12
docs/_includes/head.html
View File

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

8
docs/_includes/header.html
View File

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

12
docs/_includes/navbar.html
View File

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

2
docs/_includes/pro.html
View File

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

2
docs/_javascript/main.js
View File

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

4
docs/_javascript/navbar.js
View File

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

2
docs/_layouts/post.html
View File

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

12
docs/_posts/2017-03-10-new-field-element.md
View File

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

3
docs/_posts/2017-11-14-bulma-is-on-patreon.md
View File

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

3
docs/_sass/route.sass
View File

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

3
docs/_sass/specific.sass
View File

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

18
docs/alternative-to-bootstrap.html
View File

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

2
docs/blog.html
View File

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

10
docs/css/bulma-docs.css
View File

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

10
docs/documentation/components/breadcrumb.html
View File

@ -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="fa 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 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><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="fas fa-book"></i></span><span>Documentation</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="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 %}

2
docs/documentation/components/card.html
View File

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

14
docs/documentation/components/dropdown.html
View File

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

8
docs/documentation/components/modal.html
View File

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

6
docs/documentation/components/nav.html
View File

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

6
docs/documentation/components/navbar.html
View File

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

14
docs/documentation/components/panel.html
View File

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

70
docs/documentation/components/tabs.html
View File

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

6
docs/documentation/elements/box.html
View File

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

58
docs/documentation/elements/button.html
View File

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

1
docs/documentation/elements/icon.html
View File

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

56
docs/documentation/form/file.html
View File

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

100
docs/documentation/form/general.html
View File

@ -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">
<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">
<input class="input is-large" type="email" placeholder="Normal">
<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>

22
docs/documentation/form/input.html
View File

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

10
docs/documentation/form/select.html
View File

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

6
docs/documentation/layout/hero.html
View File

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

12
docs/documentation/layout/media-object.html
View File

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

2
docs/expo.html
View File

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

36
docs/index.html
View File

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