Adding Icon Styling with Vue

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.

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.

<!-- 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.

Fixed-Width

Setting icons to use a fixed-width helps when you’re trying to align icons in a vertical column.

<font-awesome-icon :icon="['fas', 'coffee']" fixed-width  />

Icons in a List

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 and Flip Icons

Rotate on quarter turns and flip horizontally, vertically, or both. Or try power transforms for more granularity.

<!-- 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" />

Animate Icons

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="['fas', 'cog']" spin />
<font-awesome-icon :icon="['fas', 'spinner']" pulse />

Bordered Icons

Add a border around an icon with this utility.

<font-awesome-icon :icon="['fas', 'coffee']" border />

Pulled Icons

Wrap text around an icon with this utility.

<font-awesome-icon :icon="['fas', 'coffee']" pull="left" />
<font-awesome-icon :icon="['fas', 'coffee']" pull="right" />

Power Transforms

Power Transforms are just that - powerful! You can scale, position, rotate, and flip all with this one styling tool.

• To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals.
• To move icons up, down, left, or right, use up-#, down-#, left-#, and right-# with any arbitrary value, including decimals.
• To rotate or flip icons use any combination of flip-v, flip-h, or rotate-# with any arbitrary value.

<font-awesome-icon :icon="['fas', 'coffee']" :transform="{ rotate: 42 }" />

Mask

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:

<font-awesome-icon :icon="['fad', 'coffee-pot']" swap-opacity />

We’ve also built a lot of utility into CSS custom properties for Duotone icons.

Layer

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:

Vue 2.x

// Using Vue 2.x
import Vue from 'vue'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('font-awesome-layers', FontAwesomeLayers)
Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

Vue 3.x

// Using Vue 3.x
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 Icons

Layer one or more icons to create a new icon. Include fixed-width to have the layers align.

<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>

Layer Text

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="['fas', 'badge']"/>
  <font-awesome-layers-text class="gray8" transform="down-2 shrink-8" value="New!" />
</font-awesome-layers>

Add Counters

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="['fas', 'envelope']"/>
  <font-awesome-layers-text counter value="1" position="top-right" />
</font-awesome-layers>

Invert the Icon Color to White

This can be useful when layering icons, or on its own.

<font-awesome-icon :icon="['fas', 'coffee']" inverse />