Icon
Leaf is compatible with virtually any icon library: Font Awesome, Material Icons, etc.
The .icon element is a container for any type of icon font. Icons normally take a second or two to load
and you might want control over the space the icons will take, for this you can use the icon class as a reliable square
container that will prevent jumps when the page loads.
<span class="icon">
<i class="fas fa-cat"></i>
</span>
TIP
The green background is for demonstration purposes only.
Sizes
The icon container comes in 4 sizes. It should always be a bit bigger than the icon it contains.
For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size),
but provides additional sizes.
| Container class | Container size | Font Awesome class | Icon size | Result |
|---|---|---|---|---|
icon is-small | 1rem x 1rem | fas | 1em | |
icon | 1.5rem x 1.5rem | fas | 1em | |
icon | 1.5rem x 1.5rem | fas fa-lg | 1.3333em | |
icon is-medium | 2rem x 2rem | fas | 1em | |
icon is-medium | 2rem x 2rem | fas fa-lg | 1.3333em | |
icon is-medium | 2rem x 2rem | fas fa-2x | 2em | |
icon is-large | 3rem x 3rem | fas | 1em | |
icon is-large | 3rem x 3rem | fas fa-lg | 1.3333em | |
icon is-large | 3rem x 3rem | fas fa-2x | 2em | |
icon is-large | 3rem x 3rem | fas fa-3x | 3em |
Variables
| Name | Type | Value |
|---|---|---|
$icon-dimensions | Size | 1.5rem |
$icon-dimensions-small | Size | 1rem |
$icon-dimensions-medium | Size | 2rem |
$icon-dimensions-large | Size | 3rem |