Web

Add Icons with Vue.js

When adding icon in a project configured with vue-cli (opens new window), you'll first create a library of icons, and then you can call them anywhere in your UI.

Advertisement

Set up the library

You'll first create a library of all the icons you want to use in your project in the src/main.js file. Here's an example that adds the Solid style User Secret icon to the library:

import Vue from 'vue'
import App from './App'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* add icons to the library */
library.add(faUserSecret)

/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Call the Icons

Then you can add the icons using the syntax below wherever you want them to appear in your project, like in the src/App.vue file. Here's the rest of the example we started above that adds the User Secret icon into the app UI:

<template>
  <div id="app">

    <!-- Add the style and icon you want -->
    <font-awesome-icon icon="fa-solid fa-user-secret" />

  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

Watch your camels and kebabs, Bob!

Note that you add the icons in camelCase in main.js but in kebab-case in App.vue.

Several icons in different styles

Here's an example with a number of icons in different styles, just to give you a sense of how the syntax changes from style to style.

/* add fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* add some free styles */
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add some pro styles */
import { faBicycle } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee } from '@fortawesome/pro-light-svg-icons'
import { faFeather } from '@fortawesome/pro-thin-svg-icons'
import { faHorseSaddle } from '@fortawesome/pro-duotone-svg-icons'

library.add(faTwitter, faUserSceret, faBicycle, faCoffee, faFeather, faHorseSaddle)

<font-awesome-icon icon="fa-brands fa-twitter" />
<font-awesome-icon icon="fa-solid fa-user-secret" />
<font-awesome-icon icon="fa-regular fa-bicycle" />
<font-awesome-icon icon="fa-light fa-coffee" />
<font-awesome-icon icon="fa-thin fa-feather" />
<font-awesome-icon icon="fa-duotone fa-horse-saddle" />
Advertisement

Same icon, different styles

You can also import the same icon from different styles with some help from ES import.

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee, fadCoffee)

<font-awesome-icon icon="fa-solid fa-coffee" />
<font-awesome-icon icon="fa-regular fa-coffee" />
<font-awesome-icon icon="fa-light fa-coffee" />
<font-awesome-icon icon="fa-duotone fa-coffee" />

Watch out for self-closing tags in HTML

If you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags. Read more about self-closing tags on Vue.js (opens new window). If you are writing these types of templates, you'll need to adjust the syntax to be valid HTML, like this:

<font-awesome-icon icon="fa-regular fa-coffee"></font-awesome-icon>

Looking to use computed or component properties?

We've got those too. Get the low-down on how to add icons as computed or component properties.

Add Some Style

Now that you have some icons on the page, add some pieces of flair! Check out all the styling options you can use with Font Awesome and React.

Express Yourself with Some Styling!