2016-09-11 11:00:49 +00:00
---
2017-07-29 12:02:00 +00:00
title: Icon
2017-09-10 15:32:55 +00:00
iconic: true
ionicons: true
2017-09-09 16:32:12 +00:00
mdi: true
2016-09-11 11:00:49 +00:00
layout: documentation
doc-tab: elements
doc-subtab: icon
2017-07-28 21:57:51 +00:00
variables:
- name: $icon-dimensions
value: 1.5rem
- name: $icon-dimensions-small
value: 1rem
- name: $icon-dimensions-medium
value: 2rem
- name: $icon-dimensions-large
value: 3rem
2016-09-11 11:00:49 +00:00
---
2017-07-28 21:57:51 +00:00
{% capture icon_example %}
< span class = "icon" >
< i class = "fa fa-home" > < / i >
< / span >
{% endcapture %}
2017-09-10 15:32:55 +00:00
{% capture icon_color_example %}
< span class = "icon has-text-info" >
< i class = "fa fa-info-circle" > < / i >
< / span >
< span class = "icon has-text-success" >
< i class = "fa fa-check-square" > < / i >
< / span >
< span class = "icon has-text-warning" >
< i class = "fa fa-warning" > < / i >
< / span >
< span class = "icon has-text-danger" >
< i class = "fa fa-ban" > < / i >
< / span >
{% endcapture %}
2017-09-09 16:32:12 +00:00
{% 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 %}
2016-09-11 11:00:49 +00:00
{% include subnav-elements.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Icons< / h1 >
< h2 class = "subtitle" >
2017-10-16 12:23:57 +00:00
Bulma is compatible with < strong > all icon font libraries< / strong > : < a href = "http://fontawesome.io/" > Font Awesome< / 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.
2016-09-11 11:00:49 +00:00
< / h2 >
2017-07-29 12:02:00 +00:00
{%
include meta.html
2017-09-10 15:32:55 +00:00
colors=true
2017-07-29 12:02:00 +00:00
sizes=true
variables=true
%}
2016-09-11 11:00:49 +00:00
< hr >
< div class = "content" >
2017-09-09 18:00:47 +00:00
< 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 >
2016-09-11 11:00:49 +00:00
< / div >
2017-09-09 16:32:12 +00:00
< 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 >
2016-09-11 11:00:49 +00:00
< div class = "content" >
2017-09-09 18:00:47 +00:00
< p >
2017-09-18 12:40:05 +00:00
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 icons will < strong > inherit< / strong > the font size.< / p >
2016-09-11 11:00:49 +00:00
< / div >
2017-09-10 15:32:55 +00:00
{% 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 %}
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Sizes" %}
2016-09-11 11:00:49 +00:00
< div class = "content" >
2017-09-09 16:32:12 +00:00
< p >
2017-09-10 15:32:55 +00:00
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 icons use a font-size of < code > 1em< / code > by default (since it inherits the font size), but provides < a href = "http://fontawesome.io/examples/" > additional sizes< / a > .
2017-09-09 16:32:12 +00:00
< / p >
2016-09-11 11:00:49 +00:00
< / div >
2017-09-09 16:32:12 +00:00
< table class = "table is-bordered" >
2016-09-11 11:00:49 +00:00
< thead >
< tr >
2017-09-09 16:32:12 +00:00
< th > Container class< / th >
2016-09-11 11:00:49 +00:00
< th > Container size< / th >
2017-09-09 16:32:12 +00:00
< th > Font Awesome 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 > 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 >
2017-09-09 18:00:47 +00:00
< td rowspan = "2" >
2017-09-09 16:32:12 +00:00
< code > icon< / code >
< / td >
2017-09-09 18:00:47 +00:00
< td rowspan = "2" >
2017-09-09 16:32:12 +00:00
< 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 >
2017-09-09 18:00:47 +00:00
< tr >
< td >
< code > fa fa-lg< / code >
< / td >
< td >
< code > 1.33em< / code >
< / td >
< td class = "bd-icon-size" >
< span class = "icon" >
< i class = "fa fa-lg fa-home" > < / i >
< / span >
< / td >
< / tr >
2017-09-09 16:32:12 +00:00
< tr >
< 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 > 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 >
2017-09-09 18:00:47 +00:00
{% include anchor.html name="Font Awesome variations" %}
2017-09-09 16:32:12 +00:00
< 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 >
2016-09-11 11:00:49 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2017-09-09 16:32:12 +00:00
< 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 >
2016-09-11 11:00:49 +00:00
< / tr >
< tr >
2017-09-09 16:32:12 +00:00
< td >
Rotated & 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 >
2016-09-11 11:00:49 +00:00
< / tr >
< tr >
2017-09-09 16:32:12 +00:00
< 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 >
2016-09-11 11:00:49 +00:00
< / tr >
< tr >
2017-09-09 16:32:12 +00:00
< 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 >
2016-09-11 11:00:49 +00:00
< / tr >
< / tbody >
< / table >
2017-07-28 21:57:51 +00:00
2017-09-09 18:00:47 +00:00
{% include anchor.html name="Material Design Icons" %}
< div class = "content" >
< p >
2017-09-10 15:32:55 +00:00
Here is how the < code > icon< / code > container can be used with < a href = "https://materialdesignicons.com" > Material Design Icons< / a > .
2017-09-09 18:00:47 +00:00
< / 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 >
2017-09-10 15:32:55 +00:00
{% 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 >
2017-07-28 21:57:51 +00:00
{% include variables.html %}
2016-09-11 11:00:49 +00:00
< / div >
< / section >
