Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 03:14:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix #395, Fix #735, Fix #930

Browse Source
This commit is contained in:
Jeremy Thomas
2017-09-09 18:32:12 +02:00
parent ac533a21c1
commit cec282634e
11 changed files with 1249 additions and 2005 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
---
title: Icon
mdi: true
layout: documentation
doc-tab: elements
doc-subtab: icon
@@ -21,13 +22,31 @@ variables:
</span>
{% endcapture %}
{% capture icon_sizes_example %}
<span class="icon">
<i class="fa fa-camera-retro fa-lg"></i>
</span>
<span class="icon">
<i class="fa fa-camera-retro fa-2x"></i>
</span>
<span class="icon">
<i class="fa fa-camera-retro fa-3x"></i>
</span>
<span class="icon">
<i class="fa fa-camera-retro fa-4x"></i>
</span>
<span class="icon">
<i class="fa fa-camera-retro fa-5x"></i>
</span>
{% endcapture %}
{% include subnav-elements.html %}
<section class="section">
<div class="container">
<h1 class="title">Icons</h1>
<h2 class="subtitle">
Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
Bulma is compatible with <strong>most icon libraries</strong>: <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, etc.
</h2>
{%
include meta.html
@@ -42,51 +61,333 @@ variables:
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
</div>
{% include snippet.html content=icon_example %}
<div class="block bd-icon-size">
{% include snippet.html content=icon_example %}
</div>
<div class="message is-info">
<div class="message-body">
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
</div>
</div>
<div class="content">
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
<p>The <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized at <code>1em</code>.</p>
</div>
{% include anchor.html name="Sizes" %}
<div class="content">
<p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
<p>The Bulma <code>icon</code> container is always slightly bigger than the font-size used:</p>
<p>
The Bulma <code>icon</code> container should always be slightly bigger than the font-size used. For example, Font Awesome icons use a font-size of <code>1em</code> by default, but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
</p>
</div>
<table class="table">
<table class="table is-bordered">
<thead>
<tr>
<th colspan="2">Class</th>
<th>Font-size</th>
<th>Container class</th>
<th>Container size</th>
<th>Font Awesome class</th>
<th>Icon size</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>icon is-small</code></td>
<td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
<td>14px</td>
<td>1rem x 1rem</td>
<td>
<code>icon is-small</code>
</td>
<td>
<code>1rem x 1rem</code>
</td>
<td>
<code>fa</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-small">
<i class="fa fa-home"></i>
</span>
</td>
</tr>
<tr>
<td><code>icon</code></td>
<td><span class="icon"><i class="fa fa-home"></i></span></td>
<td>21px</td>
<td>1.5rem x 1.5rem</td>
<td>
<code>icon</code>
</td>
<td>
<code>1.5rem x 1.5rem</code>
</td>
<td>
<code>fa</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon">
<i class="fa fa-home"></i>
</span>
</td>
</tr>
<tr>
<td><code>icon is-medium</code></td>
<td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
<td>28px</td>
<td>2rem x 2rem</td>
<td rowspan="3">
<code>icon is-medium</code>
</td>
<td rowspan="3">
<code>2rem x 2rem</code>
</td>
<td>
<code>fa</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-medium">
<i class="fa fa-home"></i>
</span>
</td>
</tr>
<tr>
<td><code>icon is-large</code></td>
<td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
<td>42px</td>
<td>3rem x 3rem</td>
<td>
<code>fa fa-lg</code>
</td>
<td>
<code>1.33em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-medium">
<i class="fa fa-lg fa-home"></i>
</span>
</td>
</tr>
<tr>
<td>
<code>fa fa-2x</code>
</td>
<td>
<code>2em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-medium">
<i class="fa fa-2x fa-home"></i>
</span>
</td>
</tr>
<tr>
<td rowspan="4">
<code>icon is-large</code>
</td>
<td rowspan="4">
<code>3rem x 3rem</code>
</td>
<td>
<code>fa</code>
</td>
<td>
<code>1em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-large">
<i class="fa fa-home"></i>
</span>
</td>
</tr>
<tr>
<td>
<code>fa fa-lg</code>
</td>
<td>
<code>1.33em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-large">
<i class="fa fa-lg fa-home"></i>
</span>
</td>
</tr>
<tr>
<td>
<code>fa fa-2x</code>
</td>
<td>
<code>2em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-large">
<i class="fa fa-2x fa-home"></i>
</span>
</td>
</tr>
<tr>
<td>
<code>fa fa-3x</code>
</td>
<td>
<code>3em</code>
</td>
<td class="bd-icon-size">
<span class="icon is-large">
<i class="fa fa-3x fa-home"></i>
</span>
</td>
</tr>
</tbody>
</table>
{% include anchor.html name="Icon variations" %}
<div class="content">
<p>
Font Awesome also provides modifier classes for:
</p>
<ul>
<li>
fixed width icons
</li>
<li>
bordered icons
</li>
<li>
animated icons
</li>
<li>
rotated &amp; flipped icons
</li>
<li>
stacked icons
</li>
</ul>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>Type</th>
<th>Font Awesome class</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Fixed width
</td>
<td>
<code>fa fa-fw</code>
</td>
<td class="bd-icon-size">
<span class="icon">
<i class="fa fa-home fa-fw"></i>
</span>
</td>
</tr>
<tr>
<td>
Bordered
</td>
<td>
<code>fa fa-border</code>
</td>
<td>
<span class="icon">
<i class="fa fa-home fa-border"></i>
</span>
</td>
</tr>
<tr>
<td>
Animated
</td>
<td>
<code>fa fa-refresh fa-spin</code>
</td>
<td class="bd-icon-size">
<span class="icon">
<i class="fa fa-refresh fa-spin"></i>
</span>
</td>
</tr>
<tr>
<td>
Rotated &amp; flipped
</td>
<td>
<code>fa fa-shield</code><br>
<code>fa fa-shield fa-rotate-90</code><br>
<code>fa fa-shield fa-rotate-180</code><br>
<code>fa fa-shield fa-rotate-270</code><br>
<code>fa fa-shield fa-flip-horizontal</code><br>
<code>fa fa-shield fa-flip-vertical</code>
</td>
<td class="bd-icon-size">
<span class="icon">
<i class="fa fa-shield"></i>
</span>
<br>
<span class="icon">
<i class="fa fa-shield fa-rotate-90"></i>
</span>
<br>
<span class="icon">
<i class="fa fa-shield fa-rotate-180"></i>
</span>
<br>
<span class="icon">
<i class="fa fa-shield fa-rotate-270"></i>
</span>
<br>
<span class="icon">
<i class="fa fa-shield fa-flip-horizontal"></i>
</span>
<br>
<span class="icon">
<i class="fa fa-shield fa-flip-vertical"></i>
</span>
</td>
</tr>
<tr>
<td rowspan="2">
Stacked
</td>
<td>
{% highlight html %}<span class="icon is-medium">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
</span>{% endhighlight %}
</td>
<td class="bd-icon-size">
<span class="icon is-medium">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
</span>
</td>
</tr>
<tr>
<td>
{% highlight html %}<span class="icon is-large">
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x has-text-danger"></i>
</span>
</span>{% endhighlight %}
</td>
<td class="bd-icon-size">
<span class="icon is-large">
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x has-text-danger"></i>
</span>
</span>
</td>
</tr>
</tbody>
</table>