Appearance
Font Awesome
When using for example our FTTabs component with icons, FontAwesome needs to be installed and used properly.
Vue 3
To make use of FontAwesome add the following code to your entry file.
main.ts
ts
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCircleInfo } from '@fasttrack-solutions/fontawesome-pro-solid-svg-icons';
import { faRocketLaunch } from '@fasttrack-solutions/fontawesome-pro-duotone-svg-icons';
library.add(faCircleInfo ,faRocketLaunch);
app.component('fa', FontAwesomeIcon);import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCircleInfo } from '@fasttrack-solutions/fontawesome-pro-solid-svg-icons';
import { faRocketLaunch } from '@fasttrack-solutions/fontawesome-pro-duotone-svg-icons';
library.add(faCircleInfo ,faRocketLaunch);
app.component('fa', FontAwesomeIcon);Nuxt 3
To make use of FontAwesome create a plugin and add the following code.
nuxt.config.ts
ts
export default defineNuxtConfig({
...
plugins: ['./plugins/fort-awesome.ts'],
...
}export default defineNuxtConfig({
...
plugins: ['./plugins/fort-awesome.ts'],
...
}fort-awesome.ts
ts
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCircleInfo } from '@fasttrack-solutions/fontawesome-pro-solid-svg-icons';
import { faRocketLaunch } from '@fasttrack-solutions/fontawesome-pro-duotone-svg-icons';
library.add(faCircleInfo ,faRocketLaunch);
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('fa', FontAwesomeIcon);
});import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCircleInfo } from '@fasttrack-solutions/fontawesome-pro-solid-svg-icons';
import { faRocketLaunch } from '@fasttrack-solutions/fontawesome-pro-duotone-svg-icons';
library.add(faCircleInfo ,faRocketLaunch);
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('fa', FontAwesomeIcon);
});