Icons

LOOP offers 3 types of icon:

  • Font Awesome icons
  • Custom icons
  • Image icons

Icons inherit their size from the current font-size context they're in. Icons are 1em high, widths vary depending on the artwork.

Font Awesome icons

Uses classes from the FontAwesome icon library.

Custom icons

Has inline styles to set the mask-image and the width (in ems, height being 1em)

Mask images use the alpha (opacity) settings within the image. SVGs are best as they will scale to any size.

Picture icons

Picture icons use the same sizing rules as above, but they are effectively just images.

Images can be any format - though raster images (GIF, PNG, JPG, WEBP) will require srcsets. SVGs will scale natively.

There can be an optional 'hover' image