UHasselt Component Library

Icon: LG icon 

<span class="icon far fa-external-link  fa-lg " aria-hidden="true"></span>
 
<span class="icon {{style}} {{icon}} {{#if rotation}}{{rotation}}{{/if}} {{#if size}}{{size}}{{/if}} {{modifier}}" aria-hidden="true"></span>
 
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-lg",
  "rotation": "",
  "modifier": ""
}

The icon component uses FontAwesome for displaying icons. The icon component supports different style, rotation and size variants

Style variants

  • far : regular icons, which is the default value
  • fas : solid icons
  • fal : light icons
  • fad : duotone icons

Rotation variants

  • fa-rotate-90 : rotates the icon 90° degrees clockwise
  • fa-rotate-180 : rotates the icon 180° degrees clockwise
  • fa-rotate-270 : rotates the icon 270° degrees clockwise
  • fa-flip-horizontal : flips the icon horizontally
  • fa-flip-vertical : flips the icon vertically
  • fa-spin : spins the icon
  • fa-pulse : rotates the icon in 8 steps

Size variants

  • fa-xs : extra small
  • fa-ms : medium small
  • fa-lg : large
  • fa-2x : double size