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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,107 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
You'll first create a library of all the icons you want to use in your project in the src/main.js or src/main.ts file. Here's an example that adds the Solid style User Secret icon to the library:
/* Set up using Vue 2 */import Vue from'vue'import App from'./App'/* import the fontawesome core */import{ library }from'@fortawesome/fontawesome-svg-core'/* import font awesome icon component */import{ FontAwesomeIcon }from'@fortawesome/vue-fontawesome'/* import specific icons */import{ faUserSecret }from'@fortawesome/free-solid-svg-icons'/* 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 */newVue({el:'#app',components:{ App },template:'<App/>'})
/* Set up using Vue 3 */import{ createApp }from'vue'import App from'./App.vue'/* import the fontawesome core */import{ library }from'@fortawesome/fontawesome-svg-core'/* import font awesome icon component */import{ FontAwesomeIcon }from'@fortawesome/vue-fontawesome'/* import specific icons */import{ faUserSecret }from'@fortawesome/free-solid-svg-icons'/* add icons to the library */
library.add(faUserSecret)createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
Call the Icons
Using Vue 2 or Vue 3 ?
You can add icons to your Vue 2 or Vue 3 project using a string format or an array format.
You can now call the icons, just use the syntax below wherever you want the icons 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 fa-user-secret icon into the app UI:
<template><divid="app"><!-- Add the style and icon you want using the String format --><font-awesome-iconicon="fa-solid fa-user-secret"/></div></template><script>exportdefault{name:'App'}</script>
<template><divid="app"><!-- Add the style and icon you want using the Array format --><font-awesome-icon:icon="['fas', 'user-secret']"/></div></template><script>exportdefault{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.
Font Awesome Sharp requires Pro and specific versions!
/* Vue 2 and Vue 3 use the same icon importing syntax *//* 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{ faEnvelope }from'@fortawesome/pro-light-svg-icons'import{ faFeather }from'@fortawesome/pro-thin-svg-icons'import{ faHorseSaddle }from'@fortawesome/pro-duotone-svg-icons'import{ faAlien }from'@fortawesome/sharp-solid-svg-icons'import{ faPlateUtensils }from'@fortawesome/sharp-regular-svg-icons'/* add each imported icon to the library */
library.add(faTwitter, faUserSceret, faBicycle, faCoffee, faFeather, faHorseSaddle, faAlien)
Time to add those icons.
<!-- Add Icons using String format --><font-awesome-iconicon="fa-brands fa-twitter"/><font-awesome-iconicon="fa-solid fa-user-secret"/><font-awesome-iconicon="fa-regular fa-bicycle"/><font-awesome-iconicon="fa-light fa-envelope"/><font-awesome-iconicon="fa-thin fa-feather"/><font-awesome-iconicon="fa-duotone fa-horse-saddle"/><font-awesome-iconicon="fa-sharp fa-solid fa-alien"/><font-awesome-iconicon="fa-sharp fa-regular fa-plate-utensils"/>
<!-- Add Icons using Array format --><font-awesome-icon:icon="['fab', 'twitter']"/><font-awesome-icon:icon="['fas', 'user-secret']"/><font-awesome-icon:icon="['far', 'bicycle']"/><font-awesome-icon:icon="['fal', 'envelope']"/><font-awesome-icon:icon="['fat', 'feather']"/><font-awesome-icon:icon="['fad', 'horse-saddle']"/><font-awesome-icon:icon="['fass', 'alien']"/><font-awesome-icon:icon="['fasr', 'plate-utensils']"/>
Same icon, different styles
You can also import the same icon from different styles with some help from ES import. Import in the main.js file:
/* Vue 2 and Vue 3 use the same icon importing syntax */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 fatCoffee }from'@fortawesome/pro-thin-svg-icons'import{ faCoffee as fadCoffee }from'@fortawesome/pro-duotone-svg-icons'import{ faCoffee as fassCoffee }from'@fortawesome/sharp-solid-svg-icons'import{ faCoffee as fasrCoffee }from'@fortawesome/sharp-regular-svg-icons'
library.add(fasCoffee, farCoffee, falCoffee, fadCoffee, fassCoffee, fasrCoffee)
Add the icons to your component.
<!-- Add Icons using String format --><font-awesome-iconicon="fa-solid fa-coffee"/><font-awesome-iconicon="fa-regular fa-coffee"/><font-awesome-iconicon="fa-light fa-coffee"/><font-awesome-iconicon="fa-thin fa-coffee"/><font-awesome-iconicon="fa-duotone fa-coffee"/><font-awesome-iconicon="fa-sharp fa-solid fa-coffee"/><font-awesome-iconicon="fa-sharp fa-regular fa-coffee"/>
<!-- Add Icons using Array format --><font-awesome-icon:icon="['fas', 'coffee']"/><font-awesome-icon:icon="['far', 'coffee']"/><font-awesome-icon:icon="['fal', 'coffee']"/><font-awesome-icon:icon="['fat', 'coffee']"/><font-awesome-icon:icon="['fad', 'coffee']"/><font-awesome-icon:icon="['fass', 'coffee']"/><font-awesome-icon:icon="['fasr', '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:
<!-- Add Icons using String format --><font-awesome-iconicon="fa-regular fa-envelope"></font-awesome-icon>
<!-- Add Icons using Array format --><font-awesome-icon:icon="['far', 'envelope']"></font-awesome-icon>