Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -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

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