mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
84 lines
2.3 KiB
HTML
84 lines
2.3 KiB
HTML
|
---
|
||
|
|
layout: documentation
|
||
|
|
doc-tab: elements
|
||
|
|
doc-subtab: icon
|
||
|
|
---
|
||
|
|
|
||
|
|
{% 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.
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<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:</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="example">
|
||
|
|
<span class="icon">
|
||
|
|
<i class="fa fa-home"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<span class="icon">
|
||
|
|
<i class="fa fa-home"></i>
|
||
|
|
</span>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h3 class="title">Sizes</h3>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2">Class</th>
|
||
|
|
<th>Font-size</th>
|
||
|
|
<th>Container size</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>16x16px</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>icon</code></td>
|
||
|
|
<td><span class="icon"><i class="fa fa-home"></i></span></td>
|
||
|
|
<td>21px</td>
|
||
|
|
<td>24x24px</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>32x32px</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>48x48px</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</section>
|