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!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
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 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 */newVue({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><divid="app"><!-- Add the style and icon you want --><font-awesome-iconicon="fa-solid fa-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.
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: