Lets be honest 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

  1. Install npm i --save @fortawesome/fontawesome-svg-core this will give you the functions to import all icons
  2. 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

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

  2. 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
<fa icon="plus"/>
<fa :icon="['fab', 'youtube']" />//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
<fa :icon="['fab', 'youtube']" />
<fa :icon="['fab', 'github']" />