Icons

Elenore is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.

Colors Yes
Sizes Yes
Variables Yes

The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

<span class="icon">
  <i class="fas fa-home"></i>
</span>
The yellow background is only here for demonstration purposes, to highlight the icon container's area.

By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

Colors #

Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. 

<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>

Sizes #

The Elenore icon container comes in 4 sizes. It should always be slightly 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 5 class Icon size Result
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
fas fa-3x 3em

Font Awesome variations #

Font Awesome also provides modifier classes for:

  • fixed width icons
  • bordered icons
  • animated icons
  • rotated & flipped icons
  • stacked icons
Type Font Awesome class Result
Fixed width fas fa-fw
Bordered fas fa-border
Animated fas fa-spinner fa-pulse
Rotated & flipped fas fa-shield-alt
fas fa-shield-alt data-fa-transform="rotate-90"
fas fa-shield-alt data-fa-transform="rotate-180"
fas fa-shield-alt data-fa-transform="rotate-270"
fas fa-shield-alt data-fa-transform="flip-h"
fas fa-shield-alt data-fa-transform="flip-v"




Stacked 
<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>
 
<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>

Material Design Icons #

Here is how the icon container can be used with Material Design Icons.

Container class Container size MDI class Icon size Result
icon is-small 1rem x 1rem mdi 1em
icon 1.5rem x 1.5rem mdi mdi-18px 18px
mdi mdi-24px 24px
icon is-medium 2rem x 2rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
icon is-large 3rem x 3rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
mdi mdi-48px 48px

MDI also provides modifier classes for:

  • light and dark icons
  • rotated & flipped icons
Type Material Design Icon class Result
Light color mdi mdi-light
Dark color mdi mdi-dark
Light inactive color mdi mdi-light mdi-inactive
Dark inactive color mdi mdi-dark mdi-inactive
Flipped mdi mdi-flip-h
mdi mdi-flip-v
Rotated mdi mdi-rotate-45
mdi mdi-rotate-90
mdi mdi-rotate-180

Open Iconic #

Here is how the icon container can be used with Open Iconic.

Container class Container size Iconic class Icon size Result
icon is-small 1rem x 1rem oi [data-glyph=puzzle-piece] 1em
icon 1.5rem x 1.5rem oi [data-glyph=puzzle-piece] 1em
icon is-medium 2rem x 2rem oi [data-glyph=puzzle-piece] 1em
icon is-large 3rem x 3rem oi [data-glyph=puzzle-piece] 1em

Ionicons #

Here is how the icon container can be used with Ionicons.

Container class Container size Ionicon class Icon size Result
icon is-small 1rem x 1rem ion-ionic 1em
icon 1.5rem x 1.5rem ion-ionic 1em
icon is-medium 2rem x 2rem ion-ionic 1em
icon is-large 3rem x 3rem ion-ionic 1em

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Elenore. Learn how.

Name Default value
Name Default value
$icon-dimensions 1.5rem
$icon-dimensions-small 1rem
$icon-dimensions-medium 2rem
$icon-dimensions-large 3rem

This page is open source. View on GitHub