Icon Font Awesome

BsIconFontawesome is small, and a lightweight component. It can be used inside almost any component or html element. BsIconFontawesome loads free icons from Font Awesome dynamically.

Added since v2.1.0

Overview

The icon's name used by BsIconFontawesome is the same as in Font Awesome website. BsIconFontawesome has three icon variants, namely: Solid (default), Regular, and Light.

The size property is used to set the icon size. And if not set, the default size will be used.

Solid

Regular

Light

Styling an Icon

<bs-icon-fontawesome> can be styles with css class or inline style.

Solid

Regular

Rotating an Icon

Additionally, you can also rotate the icon to some extent. Use flip property or rotation property to rotate the icon, but do not use both property together.

Flip

Rotate

Animation

<bs-icon-fontawesome> also has built-in animations, which are: Spin and Pulse.

Spin animation

Pulse animation

API Reference

Property	Type	Default	Description
flip	String		Flip the icon, valid values are: horizontal, vertical, both.
height	Number	24	The icon's height in pixel.
icon required	String		The icon's name. Use any valid icon name from Font Awesome website.
pulse	Boolean	false	Apply pulse animation.
rotate	Number		Rotate the icon, valid values are: 90, 180, 270.
size	Number		Shortcut to create icon with equal height and width.
spin	Boolean	false	Apply spin animation.
variant	String	'solid'	Icon style variant, valid values are: regular, solid, light.
version	String	'6.7.1'	Font Awesome vendor version.
width	Number	24	The icon's width in pixel.