mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
976 lines
22 KiB
HTML
976 lines
22 KiB
HTML
---
|
|
title: Icon
|
|
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="http://ionicons.com/">Ionicons</a>, etc.'
|
|
fontawesome4: true
|
|
ionicons: true
|
|
mdi: true
|
|
layout: docs
|
|
theme: library
|
|
doc-tab: elements
|
|
doc-subtab: icon
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- elements
|
|
- elements-icon
|
|
meta:
|
|
colors: true
|
|
sizes: true
|
|
variables: true
|
|
---
|
|
{% capture icon_example %}
|
|
<span class="icon">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
{% endcapture %}
|
|
{% capture icon_text_example %}
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
<span>Home</span>
|
|
</span>
|
|
{% endcapture %}
|
|
{% capture icon_text_train_example %}
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-train"></i>
|
|
</span>
|
|
<span>Paris</span>
|
|
<span class="icon">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
<span>Budapest</span>
|
|
<span class="icon">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
<span>Bucharest</span>
|
|
<span class="icon">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
<span>Istanbul</span>
|
|
<span class="icon">
|
|
<i class="fas fa-flag-checkered"></i>
|
|
</span>
|
|
</span>
|
|
{% endcapture %}
|
|
{% capture icon_text_in_content_example %}
|
|
<div class="content">
|
|
<p>
|
|
An invitation to
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-utensils"></i>
|
|
</span>
|
|
<span>dinner</span>
|
|
</span>
|
|
was soon afterwards dispatched; and already had Mrs. Bennet planned the
|
|
courses that were to do credit to her housekeeping, when an answer arrived
|
|
which deferred it all. Mr. Bingley was obliged to be in
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-city"></i>
|
|
</span>
|
|
<span>town</span>
|
|
</span>
|
|
the following day, and, consequently, unable to accept the honour of their
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-envelope-open-text"></i>
|
|
</span>
|
|
<span>invitation</span> </span
|
|
>, etc.
|
|
</p>
|
|
|
|
<p>
|
|
Mrs. Bennet was quite disconcerted. She could not imagine what business he
|
|
could have in town so soon after his
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-flag-checkered"></i>
|
|
</span>
|
|
<span>arrival</span>
|
|
</span>
|
|
in Hertfordshire; and she began to fear that he might be always
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas fa-plane-departure"></i>
|
|
</span>
|
|
<span>flying</span>
|
|
</span>
|
|
about from one place to another, and never settled at Netherfield as he
|
|
ought to be.
|
|
</p>
|
|
</div>
|
|
{% endcapture %}
|
|
{% capture icon_text_div_example %}
|
|
<div class="icon-text">
|
|
<span class="icon has-text-info">
|
|
<i class="fas fa-info-circle"></i>
|
|
</span>
|
|
<span>Information</span>
|
|
</div>
|
|
|
|
<p class="block">
|
|
Your package will be delivered on <strong>Tuesday at 08:00</strong>.
|
|
</p>
|
|
|
|
<div class="icon-text">
|
|
<span class="icon has-text-success">
|
|
<i class="fas fa-check-square"></i>
|
|
</span>
|
|
<span>Success</span>
|
|
</div>
|
|
|
|
<p class="block">Your image has been successfully uploaded.</p>
|
|
|
|
<div class="icon-text">
|
|
<span class="icon has-text-warning">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</span>
|
|
<span>Warning</span>
|
|
</div>
|
|
|
|
<p class="block">
|
|
Some information is missing from your <a href="#">profile</a> details.
|
|
</p>
|
|
|
|
<div class="icon-text">
|
|
<span class="icon has-text-danger">
|
|
<i class="fas fa-ban"></i>
|
|
</span>
|
|
<span>Danger</span>
|
|
</div>
|
|
|
|
<p class="block">
|
|
There was an error in your submission. <a href="#">Please try again</a>.
|
|
</p>
|
|
|
|
{% 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_text_color_example %}
|
|
<span class="icon-text has-text-info">
|
|
<span class="icon">
|
|
<i class="fas fa-info-circle"></i>
|
|
</span>
|
|
<span>Info</span>
|
|
</span>
|
|
|
|
<span class="icon-text has-text-success">
|
|
<span class="icon">
|
|
<i class="fas fa-check-square"></i>
|
|
</span>
|
|
<span>Success</span>
|
|
</span>
|
|
|
|
<span class="icon-text has-text-warning">
|
|
<span class="icon">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</span>
|
|
<span>Warning</span>
|
|
</span>
|
|
|
|
<span class="icon-text has-text-danger">
|
|
<span class="icon">
|
|
<i class="fas fa-ban"></i>
|
|
</span>
|
|
<span>Danger</span>
|
|
</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 %}
|
|
{% capture stacked_medium %}
|
|
<span class="icon is-medium">
|
|
<span class="fa-stack fa-sm">
|
|
<i class="fas fa-circle fa-stack-2x"></i>
|
|
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
|
|
</span>
|
|
</span>
|
|
{% endcapture %}
|
|
{% capture stacked_large %}
|
|
<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>
|
|
{% endcapture %}
|
|
|
|
<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 docs/elements/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 docs/elements/anchor.html name="Icon text" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long
|
|
as all text <em>inside</em> is wrapped in its own <code>span</code> element:
|
|
</p>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=icon_text_example %}
|
|
|
|
<div class="content">
|
|
<p>You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:</p>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=icon_text_train_example %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph
|
|
of <strong>text</strong>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=icon_text_in_content_example %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a
|
|
<code><div></code> tag instead:
|
|
</p>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=icon_text_div_example %}
|
|
|
|
<!-- -->
|
|
{% include docs/elements/anchor.html name="Colors" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
Since icon fonts are simply <strong>text</strong>, you can use the
|
|
<a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a>
|
|
to change the icon's color.
|
|
</p>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=icon_color_example %}
|
|
|
|
<div class="content">
|
|
<p>The same applies to the <code>icon-text</code>:</p>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=icon_text_color_example %}
|
|
|
|
<!-- -->
|
|
{% include docs/elements/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/on-the-web/styling/sizing-icons"
|
|
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="3">
|
|
<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>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- -->
|
|
{% include docs/elements/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>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 rowspan="2">Stacked</td>
|
|
<td>
|
|
{% highlight html -%}
|
|
{{- stacked_medium -}}
|
|
{%- endhighlight %}
|
|
</td>
|
|
<td class="bd-icon-size">
|
|
<span class="icon is-medium">
|
|
<span class="fa-stack fa-sm">
|
|
<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 -%}
|
|
{{- stacked_large -}}
|
|
{%- 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 docs/elements/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 docs/elements/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>
|
|
|
|
|