Font Awesome has a ton of great styling tools that work hand-in-hand with our icons to make your project look its best.
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.
Font Awesome supports t-shirt size scale from 2xs to 2xl as well as literal sizing from 1x to 10x.
<!-- T-shirt sizes -->
<font-awesome-icon icon="fa-solid fa-coffee" size="xs" />
<font-awesome-icon icon="fa-solid fa-coffee" size="lg" />
<!-- X-factor sizing -->
<font-awesome-icon icon="fa-solid fa-coffee" size="6x" />
<!-- T-shirt sizes -->
<font-awesome-icon :icon="['fas', 'coffee']" size="xs" />
<font-awesome-icon :icon="['fas', 'coffee']" size="lg" />
<!-- X-factor sizing -->
<font-awesome-icon :icon="['fas', 'coffee']" size="7x" />
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.
Set an icon’s width to only their symbol and not the entire Icon Canvas.
<font-awesome-icon icon="fa-solid fa-coffee" widthAuto />
<font-awesome-icon :icon="['fas', 'coffee']" widthAuto />
There’s no Vue-specific syntax for using icons in a list, so you can use fa-ul and fa-li to replace default bullets in unordered lists just like usual.
Rotate on quarter turns and flip horizontally, vertically, or both. Or try power transforms for more granularity.
<!-- Rotate -->
<font-awesome-icon icon="fa-solid fa-coffee" rotation="90" />
<font-awesome-icon icon="fa-solid fa-coffee" rotation="180" />
<font-awesome-icon icon="fa-solid fa-coffee" rotation="270" />
<!-- Mirror -->
<font-awesome-icon icon="fa-solid fa-coffee" flip="horizontal" />
<font-awesome-icon icon="fa-solid fa-coffee" flip="vertical" />
<font-awesome-icon icon="fa-solid fa-coffee" flip="both" />
<!-- Rotate -->
<font-awesome-icon :icon="['fas', 'coffee']" rotation="90" />
<font-awesome-icon :icon="['fas', 'coffee']" rotation="180" />
<font-awesome-icon :icon="['fas', 'coffee']" rotation="270" />
<!-- Mirror -->
<font-awesome-icon :icon="['fas', 'coffee']" flip="horizontal" />
<font-awesome-icon :icon="['fas', 'coffee']" flip="vertical" />
<font-awesome-icon :icon="['fas', 'coffee']" flip="both" />
You can also customize the rotation of an icon by a specific angle of your choice. To do so:
rotateBy property in your icon component reference. The rotateBy property is a boolean flag and does not accept a value directly.--fa-rotate-angle CSS custom property to any valid CSS transform rotate value.<font-awesome-icon
icon="fa-solid fa-coffee"
rotateBy
style="--fa-rotate-angle: 329deg"
/>
<font-awesome-icon
:icon="['fas', 'coffee']"
rotateBy
style="--fa-rotate-angle: 329deg"
/>
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.
<font-awesome-icon icon="fa-solid fa-heart" beat />
<font-awesome-icon icon="fa-solid fa-circle-info" beat-fade />
<font-awesome-icon icon="fa-solid fa-basketball" bounce />
<font-awesome-icon icon="fa-solid fa-exclamation-triangle" fade />
<font-awesome-icon icon="fa-solid fa-compact-disc" flip />
<font-awesome-icon icon="fa-solid fa-bell" shake />
<font-awesome-icon icon="fa-solid fa-cog" spin />
<font-awesome-icon icon="fa-solid fa-compass" spin spin-reverse />
<font-awesome-icon icon="fa-solid fa-spinner" spin-pulse />
<font-awesome-icon :icon="['fas', 'heart']" beat />
<font-awesome-icon :icon="['fas', 'circle-info']" beat-fade />
<font-awesome-icon :icon="['fas', 'basketball']" bounce />
<font-awesome-icon :icon="['fas', 'exclamation-triangle']" fade />
<font-awesome-icon :icon="['fas', 'compact-disc']" flip />
<font-awesome-icon :icon="['fas', 'bell']" shake />
<font-awesome-icon :icon="['fas', 'cog']" spin />
<font-awesome-icon :icon="['fas', 'compass']" spin spin-reverse />
<font-awesome-icon :icon="['fas', 'spinner']" spin-pulse />
We’ve also built some animation utilities into CSS custom properties.
Add a border around an icon with this utility.
<font-awesome-icon icon="fa-solid fa-coffee" border />
<font-awesome-icon :icon="['fas', 'coffee']" border />
Wrap text around an icon with this utility.
<font-awesome-icon icon="fa-solid fa-coffee" pull="left" />
<font-awesome-icon icon="fa-solid fa-coffee" pull="right" />
<font-awesome-icon :icon="['fas', 'coffee']" pull="left" />
<font-awesome-icon :icon="['fas', 'coffee']" pull="right" />
Power Transforms are just that - powerful! You can scale, position, rotate, and flip all with this one styling tool.
grow-# and shrink-# with any arbitrary value, including decimals.up-#, down-#, left-#, and right-# with any arbitrary value, including decimals.flip-v, flip-h, or rotate-# with any arbitrary value.<font-awesome-icon icon="fa-solid fa-coffee" transform="shrink-6 left-4" />
<font-awesome-icon :icon="['fas', 'coffee']" :transform="{ rotate: 42 }" />
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="fa-solid fa-coffee" transform="shrink-7" mask="fa-solid fa-circle" />
<!-- 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']" />
For Duotone icons, you can swap the opacity on the layers:
<font-awesome-icon icon="fa-duotone fa-solid fa-coffee-pot" swap-opacity />
<font-awesome-icon :icon="['fad', 'coffee-pot']" swap-opacity />
We’ve also built a lot of utility into CSS custom properties for Duotone icons.
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:
import { createApp } from 'vue'
import App from './App.vue'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.component('font-awesome-layers', FontAwesomeLayers)
.component('font-awesome-layer-text', FontAwesomeLayersText)
.mount('#app')
Then you can use the utilities in those components to layer icons, text, or add counters. You can also invert an icon to get a cut-out effect.
Layer one or more icons to create a new icon.
<font-awesome-layers class="fa-lg">
<font-awesome-icon icon="fa-solid fa-circle" />
<font-awesome-icon icon="fa-solid fa-check" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>
<font-awesome-layers class="fa-lg">
<font-awesome-icon :icon="['fas', 'circle']" />
<font-awesome-icon :icon="['fas', 'check']" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>
Add text on top of an icon. Use power transforms to control how the text appears.
<font-awesome-layers full-width class="fa-4x">
<font-awesome-icon icon="fa-solid fa-badge"/>
<font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="New!" />
</font-awesome-layers>
<font-awesome-layers full-width class="fa-4x">
<font-awesome-icon :icon="['fas', 'badge']"/>
<font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="New!" />
</font-awesome-layers>
Add a counter to the corner of an icon. Postion can be bottom-left, bottom-right, top-left and the default top-right.
<font-awesome-layers full-width class="fa-4x">
<font-awesome-icon icon="fa-solid fa-envelope" />
<font-awesome-layers-text counter value="1" position="top-right" />
</font-awesome-layers>
<font-awesome-layers full-width class="fa-4x">
<font-awesome-icon :icon="['fas', 'envelope']"/>
<font-awesome-layers-text counter value="1" position="top-right" />
</font-awesome-layers>
This can be useful when layering icons, or on its own.
<font-awesome-icon icon="fa-solid fa-coffee" inverse />
<font-awesome-icon :icon="['fas', 'coffee']" inverse />
Did you know?
We have an fa-truck load of CSS custom properties to let you customize and style your icons even more.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4