Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 18:44:28 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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>