Font Awesome Icon
BsFontawesomeIcon is small and a lightweight component. It can be used inside almost any component or HTML element. BsFontawesomeIcon loads Font Awesome free icons dynamically.
Overview
The icon's name used by BsFontawesomeIcon is the same as in Font Awesome website. BsFontawesomeIcon has three icon variants, namely: Solid (default), Regular, and Brands.
The size property is used to set the icon size. And if not set, the default size will be used.
Solid
Regular
Brands
IMPORTANT
The <bs-icon-fontawesome> tag still works, but has been deprecated since v2.2.0.
Styling an Icon
<bs-fontawesome-icon> 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-fontawesome-icon> 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. |
| svg-class | String | Apply custom css class to the svg element. v2.2.0 | |
| variant | String | 'solid' | Icon style variant, valid values are: regular, solid, brands. Updated in v2.2.0 |
| version | String | '7.2.0' | Font Awesome vendor version. Updated in v2.2.1 Valid value are: 6.5.0, 6.7.2 and 7.2.0 |
| width | Number | 24 | The icon's width in pixel. |