Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix button icons

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 10:41:53 +00:00
parent 2e7e1d7c75
commit 7720041292
23 changed files with 840 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -256,6 +256,23 @@ doc-subtab: button
<div class="columns">
<div class="column">
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-italic"></i>
</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-underline"></i>
</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon">
@@ -345,6 +362,140 @@ doc-subtab: button
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
<span class="tag is-success">New!</span>
</p>
<p>
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
</p>
</div>
<p class="control">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-medium">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-large">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
</a>
</p>
</div>
<div class="column">
{% highlight html %}
<p class="control">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-medium">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-large">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
</a>
</p>
{% endhighlight %}
</div>
</div>
<hr>
<h3 class="title">Button group</h3>
@@ -439,6 +590,79 @@ doc-subtab: button
<span>Right</span>
</a>
</p>
{% endhighlight %}
<hr>
<h3 class="title">Button group with addons</h3>
<div class="content">
<p>You can group together addons as well:</p>
</div>
<div class="example">
<div class="control is-grouped">
<p class="control has-addons">
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
</span>
<span>Bold</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-italic"></i>
</span>
<span>Italic</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-underline"></i>
</span>
<span>Underline</span>
</a>
</p>
<p class="control has-addons">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>
</span>
<span>Right</span>
</a>
</p>
</div>
</div>
{% highlight html %}
<p class="control has-addons">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>
</span>
<span>Right</span>
</a>
</p>
{% endhighlight %}
</div>