mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 19:04:30 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,29 +1,28 @@
|
||||
---
|
||||
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."
|
||||
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: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: icon
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-icon
|
||||
- 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">
|
||||
@@ -32,7 +31,6 @@ meta:
|
||||
<span>Home</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_train_example %}
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
@@ -56,7 +54,6 @@ meta:
|
||||
</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_in_content_example %}
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -67,7 +64,9 @@ meta:
|
||||
</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
|
||||
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>
|
||||
@@ -79,13 +78,13 @@ meta:
|
||||
<span class="icon">
|
||||
<i class="fas fa-envelope-open-text"></i>
|
||||
</span>
|
||||
<span>invitation</span>
|
||||
</span>,
|
||||
etc.
|
||||
<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
|
||||
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>
|
||||
@@ -99,11 +98,11 @@ meta:
|
||||
</span>
|
||||
<span>flying</span>
|
||||
</span>
|
||||
about from one place to another, and never settled at Netherfield as he ought to be.
|
||||
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">
|
||||
@@ -123,9 +122,7 @@ meta:
|
||||
<span>Success</span>
|
||||
</div>
|
||||
|
||||
<p class="block">
|
||||
Your image has been successfully uploaded.
|
||||
</p>
|
||||
<p class="block">Your image has been successfully uploaded.</p>
|
||||
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-warning">
|
||||
@@ -150,7 +147,6 @@ meta:
|
||||
</p>
|
||||
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_color_example %}
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
@@ -165,7 +161,6 @@ meta:
|
||||
<i class="fas fa-ban"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_color_example %}
|
||||
<span class="icon-text has-text-info">
|
||||
<span class="icon">
|
||||
@@ -195,7 +190,6 @@ meta:
|
||||
<span>Danger</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_sizes_example %}
|
||||
<span class="icon">
|
||||
<i class="fas fa-camera-retro fa-lg"></i>
|
||||
@@ -213,7 +207,6 @@ meta:
|
||||
<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">
|
||||
@@ -222,7 +215,6 @@ meta:
|
||||
</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture stacked_large %}
|
||||
<span class="icon is-large">
|
||||
<span class="fa-stack fa-lg">
|
||||
@@ -234,87 +226,100 @@ meta:
|
||||
|
||||
<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>
|
||||
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 elements/snippet.html content=icon_example %}
|
||||
{% 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.
|
||||
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.
|
||||
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 elements/anchor.html name="Icon text" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.9.2" %}
|
||||
{% 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:
|
||||
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 elements/snippet.html content=icon_text_example %}
|
||||
{% 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>
|
||||
You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:
|
||||
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 elements/snippet.html content=icon_text_train_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_in_content_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>.
|
||||
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 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 elements/snippet.html content=icon_text_div_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_div_example %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% 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.
|
||||
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 elements/snippet.html content=icon_color_example %}
|
||||
{% include docs/elements/snippet.html content=icon_color_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The same applies to the <code>icon-text</code>:
|
||||
</p>
|
||||
<p>The same applies to the <code>icon-text</code>:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_text_color_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_color_example %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% 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>.
|
||||
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>
|
||||
|
||||
@@ -474,25 +479,15 @@ meta:
|
||||
</table>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Font Awesome variations" %}
|
||||
{% include docs/elements/anchor.html name="Font Awesome variations" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Font Awesome also provides modifier classes for:
|
||||
</p>
|
||||
<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>
|
||||
<li>fixed width icons</li>
|
||||
<li>bordered icons</li>
|
||||
<li>animated icons</li>
|
||||
<li>stacked icons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -506,9 +501,7 @@ meta:
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Fixed width
|
||||
</td>
|
||||
<td>Fixed width</td>
|
||||
<td>
|
||||
<code>fas fa-fw</code>
|
||||
</td>
|
||||
@@ -519,9 +512,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Bordered
|
||||
</td>
|
||||
<td>Bordered</td>
|
||||
<td>
|
||||
<code>fas fa-border</code>
|
||||
</td>
|
||||
@@ -532,9 +523,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Animated
|
||||
</td>
|
||||
<td>Animated</td>
|
||||
<td>
|
||||
<code>fas fa-spinner fa-pulse</code>
|
||||
</td>
|
||||
@@ -545,11 +534,11 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
Stacked
|
||||
</td>
|
||||
<td rowspan="2">Stacked</td>
|
||||
<td>
|
||||
{% highlight html %}{{ stacked_medium }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- stacked_medium -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
@@ -562,7 +551,9 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% highlight html %}{{ stacked_large }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- stacked_large -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
@@ -577,11 +568,12 @@ meta:
|
||||
</table>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Material Design Icons" %}
|
||||
{% 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>.
|
||||
Here is how the <code>icon</code> container can be used with
|
||||
<a href="https://materialdesignicons.com">Material Design Icons</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -780,16 +772,10 @@ meta:
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
MDI also provides modifier classes for:
|
||||
</p>
|
||||
<p>MDI also provides modifier classes for:</p>
|
||||
<ul>
|
||||
<li>
|
||||
light and dark icons
|
||||
</li>
|
||||
<li>
|
||||
rotated & flipped icons
|
||||
</li>
|
||||
<li>light and dark icons</li>
|
||||
<li>rotated & flipped icons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -803,9 +789,7 @@ meta:
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Light color
|
||||
</td>
|
||||
<td>Light color</td>
|
||||
<td>
|
||||
<code>mdi mdi-light</code>
|
||||
</td>
|
||||
@@ -816,9 +800,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Dark color
|
||||
</td>
|
||||
<td>Dark color</td>
|
||||
<td>
|
||||
<code>mdi mdi-dark</code>
|
||||
</td>
|
||||
@@ -829,9 +811,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Light inactive color
|
||||
</td>
|
||||
<td>Light inactive color</td>
|
||||
<td>
|
||||
<code>mdi mdi-light mdi-inactive</code>
|
||||
</td>
|
||||
@@ -842,9 +822,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Dark inactive color
|
||||
</td>
|
||||
<td>Dark inactive color</td>
|
||||
<td>
|
||||
<code>mdi mdi-dark mdi-inactive</code>
|
||||
</td>
|
||||
@@ -855,9 +833,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Flipped
|
||||
</td>
|
||||
<td>Flipped</td>
|
||||
<td>
|
||||
<code>mdi mdi-flip-h</code>
|
||||
<br>
|
||||
@@ -874,9 +850,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Rotated
|
||||
</td>
|
||||
<td>Rotated</td>
|
||||
<td>
|
||||
<code>mdi mdi-rotate-45</code>
|
||||
<br>
|
||||
@@ -902,12 +876,10 @@ meta:
|
||||
</table>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Ionicons" %}
|
||||
{% 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>
|
||||
<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">
|
||||
@@ -1000,4 +972,4 @@ meta:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user