Adding fonts to a JS project shouldn’t be that hard but i found it a bit confusing when i tried implementing it. This article should simplify the process.

Here im adding the latest fontawesome i.e fontawesome 6 to a vue js 3 project

Install npm i –save @fortawesome/fontawesome-svg-core this will give you the functions to import all icons
Add the required icon packages that may be needed to be used. check them out here.
Here are some eg.

Free icons styles

npm i –save @fortawesome/free-solid-svg-icons
npm i –save @fortawesome/free-regular-svg-icons
npm i –save @fortawesome/free-brands-svg-icons
Add the appropriate vue component

For Vuejs 2.x npm i –save @fortawesome/vue-fontawesome@latest

For Vuejs 3.x npm i –save @fortawesome/vue-fontawesome@prerelease
In main.js before the app is mounted
eg.

import { FontAwesomeIcon } from ‘@fortawesome/vue-fontawesome’;
import { library } from ‘@fortawesome/fontawesome-svg-core’;
import { fas } from ‘@fortawesome/free-solid-svg-icons’;

import { fab } from ‘@fortawesome/free-brands-svg-icons’;

const app = createApp(App)
library.add(fas, fab);
app.use(router);
app.component(‘fa’, FontAwesomeIcon);
app.mount(‘#app’)

//to use it in the template

//the brand icons will only work this way
Or Maybe extract the icons indiviually like:

import { faYoutube, faGithub } from ‘@fortawesome/free-brands-svg-icons’;

library.add(faYoutube, faGithub);

in Templates

---