mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
952 lines
24 KiB
HTML
952 lines
24 KiB
HTML
---
|
|
title: Icon
|
|
fontawesome4: true
|
|
iconic: true
|
|
ionicons: true
|
|
mdi: true
|
|
layout: documentation
|
|
doc-tab: elements
|
|
doc-subtab: icon
|
|
---
|
|
|
|
{% capture icon_example %}
|
|
<span class="icon">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
{% endcapture %}
|
|
|
|
{% capture icon_color_example %}
|
|
<span class="icon has-text-info">
|
|
<i class="fas fa-info-circle"></i>
|
|
</span>
|
|
<span class="icon has-text-success">
|
|
<i class="fas fa-check-square"></i>
|
|
</span>
|
|
<span class="icon has-text-warning">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</span>
|
|
<span class="icon has-text-danger">
|
|
<i class="fas fa-ban"></i>
|
|
</span>
|
|
{% endcapture %}
|
|
|
|
{% capture icon_sizes_example %}
|
|
<span class="icon">
|
|
<i class="fas fa-camera-retro fa-lg"></i>
|
|
</span>
|
|
<span class="icon">
|
|
<i class="fas fa-camera-retro fa-2x"></i>
|
|
</span>
|
|
<span class="icon">
|
|
<i class="fas fa-camera-retro fa-3x"></i>
|
|
</span>
|
|
<span class="icon">
|
|
<i class="fas fa-camera-retro fa-4x"></i>
|
|
</span>
|
|
<span class="icon">
|
|
<i class="fas 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>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
|
|
</h2>
|
|
{%
|
|
include meta.html
|
|
colors=true
|
|
sizes=true
|
|
variables=true
|
|
%}
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>
|
|
The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. 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 reliable square container that will prevent the page to "jump" on page load.</p>
|
|
</div>
|
|
|
|
<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>
|
|
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
|
|
</div>
|
|
|
|
{% include anchor.html name="Colors" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
|
|
</p>
|
|
</div>
|
|
|
|
{% include snippet.html content=icon_color_example %}
|
|
|
|
{% include anchor.html name="Sizes" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" target="_blank">additional sizes</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Container class</th>
|
|
<th>Container size</th>
|
|
<th>Font Awesome 5 class</th>
|
|
<th>Icon size</th>
|
|
<th>Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-small</code>
|
|
</td>
|
|
<td>
|
|
<code>1rem x 1rem</code>
|
|
</td>
|
|
<td>
|
|
<code>fas</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="2">
|
|
<code>icon</code>
|
|
</td>
|
|
<td rowspan="2">
|
|
<code>1.5rem x 1.5rem</code>
|
|
</td>
|
|
<td>
|
|
<code>fas</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>fas fa-lg</code>
|
|
</td>
|
|
<td>
|
|
<code>1.33em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="fas fa-lg fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="3">
|
|
<code>icon is-medium</code>
|
|
</td>
|
|
<td rowspan="3">
|
|
<code>2rem x 2rem</code>
|
|
</td>
|
|
<td>
|
|
<code>fas</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>fas fa-lg</code>
|
|
</td>
|
|
<td>
|
|
<code>1.33em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="fas fa-lg fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>fas fa-2x</code>
|
|
</td>
|
|
<td>
|
|
<code>2em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="fas 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>fas</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>fas fa-lg</code>
|
|
</td>
|
|
<td>
|
|
<code>1.33em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="fas fa-lg fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>fas fa-2x</code>
|
|
</td>
|
|
<td>
|
|
<code>2em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="fas fa-2x fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>fas fa-3x</code>
|
|
</td>
|
|
<td>
|
|
<code>3em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="fas fa-3x fa-home"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include anchor.html name="Font Awesome 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 & 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>fas fa-fw</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="fas fa-home fa-fw"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Bordered
|
|
</td>
|
|
<td>
|
|
<code>fas fa-border</code>
|
|
</td>
|
|
<td>
|
|
<span class="icon">
|
|
<i class="fas fa-home fa-border"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Animated
|
|
</td>
|
|
<td>
|
|
<code>fas fa-spinner fa-pulse</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="fas fa-spinner fa-pulse"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Rotated & flipped
|
|
</td>
|
|
<td>
|
|
<code>fas fa-shield-alt</code><br>
|
|
<code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-90"</code><br>
|
|
<code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-180"</code><br>
|
|
<code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-270"</code><br>
|
|
<code>fas fa-shield-alt</code> <code>data-fa-transform="flip-h"</code><br>
|
|
<code>fas fa-shield-alt</code> <code>data-fa-transform="flip-v"</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="fas fa-shield-alt" data-fa-transform="rotate-90"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="fas fa-shield-alt" data-fa-transform="rotate-180"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="fas fa-shield-alt" data-fa-transform="rotate-270"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="fas fa-shield-alt" data-fa-transform="flip-h"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="fas fa-shield-alt" data-fa-transform="flip-v"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="2">
|
|
Stacked
|
|
</td>
|
|
<td>
|
|
{% highlight html %}<span class="icon is-medium">
|
|
<span class="fa-stack">
|
|
<i class="fas fa-circle fa-stack-2x"></i>
|
|
<i class="fas 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="fas fa-circle fa-stack-2x"></i>
|
|
<i class="fas 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="fas fa-camera fa-stack-1x"></i>
|
|
<i class="fas 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="fas fa-camera fa-stack-1x"></i>
|
|
<i class="fas fa-ban fa-stack-2x has-text-danger"></i>
|
|
</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include anchor.html name="Material Design Icons" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Container class</th>
|
|
<th>Container size</th>
|
|
<th>MDI class</th>
|
|
<th>Icon size</th>
|
|
<th>Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-small</code>
|
|
</td>
|
|
<td>
|
|
<code>1rem x 1rem</code>
|
|
</td>
|
|
<td>
|
|
<code>mdi</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-small">
|
|
<i class="mdi mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="2">
|
|
<code>icon</code>
|
|
</td>
|
|
<td rowspan="2">
|
|
<code>1.5rem x 1.5rem</code>
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-18px</code>
|
|
</td>
|
|
<td>
|
|
<code>18px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-18px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-24px</code>
|
|
</td>
|
|
<td>
|
|
<code>24px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-24px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="4">
|
|
<code>icon is-medium</code>
|
|
</td>
|
|
<td rowspan="4">
|
|
<code>2rem x 2rem</code>
|
|
</td>
|
|
<td>
|
|
<code>mdi</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="mdi mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-18px</code>
|
|
</td>
|
|
<td>
|
|
<code>18px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="mdi mdi-18px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-24px</code>
|
|
</td>
|
|
<td>
|
|
<code>24px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="mdi mdi-24px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-36px</code>
|
|
</td>
|
|
<td>
|
|
<code>36px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<i class="mdi mdi-36px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="5">
|
|
<code>icon is-large</code>
|
|
</td>
|
|
<td rowspan="5">
|
|
<code>3rem x 3rem</code>
|
|
</td>
|
|
<td>
|
|
<code>mdi</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="mdi mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-18px</code>
|
|
</td>
|
|
<td>
|
|
<code>18px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="mdi mdi-18px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-24px</code>
|
|
</td>
|
|
<td>
|
|
<code>24px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="mdi mdi-24px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-36px</code>
|
|
</td>
|
|
<td>
|
|
<code>36px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="mdi mdi-36px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>mdi mdi-48px</code>
|
|
</td>
|
|
<td>
|
|
<code>48px</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<i class="mdi mdi-48px mdi-bell"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="content">
|
|
<p>
|
|
MDI also provides modifier classes for:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
light and dark icons
|
|
</li>
|
|
<li>
|
|
rotated & flipped icons
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Material Design Icon class</th>
|
|
<th>Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
Light color
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-light</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-light"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Dark color
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-dark</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-dark"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Light inactive color
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-light mdi-inactive</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-light mdi-inactive"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Dark inactive color
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-dark mdi-inactive</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-dark mdi-inactive"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Flipped
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-flip-h</code>
|
|
<br>
|
|
<code>mdi mdi-flip-v</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-flip-h"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-flip-v"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Rotated
|
|
</td>
|
|
<td>
|
|
<code>mdi mdi-rotate-45</code>
|
|
<br>
|
|
<code>mdi mdi-rotate-90</code>
|
|
<br>
|
|
<code>mdi mdi-rotate-180</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-rotate-45"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-rotate-90"></i>
|
|
</span>
|
|
<br>
|
|
<span class="icon">
|
|
<i class="mdi mdi-signal-4g mdi-rotate-180"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include anchor.html name="Open Iconic" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Container class</th>
|
|
<th>Container size</th>
|
|
<th>Iconic class</th>
|
|
<th>Icon size</th>
|
|
<th>Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-small</code>
|
|
</td>
|
|
<td>
|
|
<code>1rem x 1rem</code>
|
|
</td>
|
|
<td>
|
|
<code>oi [data-glyph=puzzle-piece]</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-small">
|
|
<span class="oi" data-glyph="puzzle-piece"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>icon</code>
|
|
</td>
|
|
<td>
|
|
<code>1.5rem x 1.5rem</code>
|
|
</td>
|
|
<td>
|
|
<code>oi [data-glyph=puzzle-piece]</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<span class="oi" data-glyph="puzzle-piece"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-medium</code>
|
|
</td>
|
|
<td>
|
|
<code>2rem x 2rem</code>
|
|
</td>
|
|
<td>
|
|
<code>oi [data-glyph=puzzle-piece]</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<span class="oi" data-glyph="puzzle-piece"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-large</code>
|
|
</td>
|
|
<td>
|
|
<code>3rem x 3rem</code>
|
|
</td>
|
|
<td>
|
|
<code>oi [data-glyph=puzzle-piece]</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<span class="oi" data-glyph="puzzle-piece"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include anchor.html name="Ionicons" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Container class</th>
|
|
<th>Container size</th>
|
|
<th>Ionicon class</th>
|
|
<th>Icon size</th>
|
|
<th>Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-small</code>
|
|
</td>
|
|
<td>
|
|
<code>1rem x 1rem</code>
|
|
</td>
|
|
<td>
|
|
<code>ion-ionic</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-small">
|
|
<span class="ion-ionic"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>icon</code>
|
|
</td>
|
|
<td>
|
|
<code>1.5rem x 1.5rem</code>
|
|
</td>
|
|
<td>
|
|
<code>ion-ionic</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon">
|
|
<span class="ion-ionic"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-medium</code>
|
|
</td>
|
|
<td>
|
|
<code>2rem x 2rem</code>
|
|
</td>
|
|
<td>
|
|
<code>ion-ionic</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<span class="ion-ionic"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>icon is-large</code>
|
|
</td>
|
|
<td>
|
|
<code>3rem x 3rem</code>
|
|
</td>
|
|
<td>
|
|
<code>ion-ionic</code>
|
|
</td>
|
|
<td>
|
|
<code>1em</code>
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-large">
|
|
<span class="ion-ionic"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% include variables.html type='element' %}
|
|
|
|
</div>
|
|
</section>
|