The entire Font Awesome styling toolkit is available when using Vue, but the syntax is different from our general web-use documentation. Below you'll find the syntax for adding styling with Vue, with a link to the general documentation that has descriptions and examples for each styling tool.
Using Vue 2 or Vue 3 ?
You can add icons to your Vue 2 or Vue 3 project using an array format.
Size
Font Awesome supports t-shirt size scale from xs, sm, lg, and 1x to 10x.
Remember, you can always control icon size directly with the CSS font-size attribute. The font-awesome-icon's size prop determines icon size relative to the current context's font-size.
Fixed-Width
Setting icons to use a fixed-width helps when you're trying to align icons in a vertical column.
You can use the animate utilities as a way to indicate loading or processing, especially when paired with icons like spinner or sync. The spin utility smoothly spins the icon clockwise, and the pulse utility spins clockwise in eight steps.
Grab the Mask utility when you want to layer two icons but have the inner icon cut out from the icon below so the parent element's background shows through.
<!-- using transform with mask will allow you to scale, shrink, grow, etc. the coffee icon within the circle icon --><font-awesome-icon:icon="['fas', 'coffee']"transform="shrink-7":mask="['fas', 'circle']"/>
Duotone Icons
For Duotone icons, you can swap the opacity on the layers:
If you'd like to layer icons, add a text layer over an icon, or add a counter to an icon, you'll need to add the layering components. Edit your main.js to look like this: