How to Setup Fontawesome Library with Laravel 10, Inertia, and Vue 3

Published in Laravel, InertiaJS, PHP, VueJS on Jun 22, 2023

Introduction

Fontawesome is a widely-used icon library that provides a great selection of icons to enhance the visual appeal of your web applications. In this article, we will guide you through the process of setting up the Fontawesome library with Laravel 10, Inertia, and Vue 3. By the end, you'll be able to easily add beautiful icons to your Laravel projects.

Overview

This article will walk you through the steps to integrate the Fontawesome library into your Laravel 10 project that uses Inertia and Vue 3.

To get started, follow the Vue installation guide provided on the official Fontawesome website here.

Please note that if you intend to use the Pro icons, you will need to purchase a Fontawesome license which can be obtained here.

Installation Steps

You can install the required packages by following these steps:

Using npm:

Copied!

 1# Install SVG Core (required)
 2npm i --save @fortawesome/fontawesome-svg-core
 3 
 4# Free icon styles
 5npm i --save @fortawesome/free-solid-svg-icons
 6npm i --save @fortawesome/free-regular-svg-icons
 7npm i --save @fortawesome/free-brands-svg-icons
 8 
 9# Pro icon styles (Paid feature only)
10npm i --save @fortawesome/pro-solid-svg-icons
11npm i --save @fortawesome/pro-regular-svg-icons
12npm i --save @fortawesome/pro-light-svg-icons
13npm i --save @fortawesome/pro-thin-svg-icons
14npm i --save @fortawesome/pro-duotone-svg-icons
15npm i --save @fortawesome/sharp-solid-svg-icons
16npm i --save @fortawesome/sharp-regular-svg-icons
17npm i --save @fortawesome/sharp-light-svg-icons
18 
19# Install the Vue Component (required)
20npm i --save @fortawesome/vue-fontawesome@latest-3

# Install SVG Core (required)
npm i --save @fortawesome/fontawesome-svg-core

# Free icon 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

# Pro icon styles (Paid feature only)
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons

# Install the Vue Component (required)
npm i --save @fortawesome/vue-fontawesome@latest-3

Using yarn:

Copied!

 1# Install SVG Core (required)
 2yarn add @fortawesome/fontawesome-svg-core
 3 
 4# Free icon styles
 5yarn add @fortawesome/free-solid-svg-icons
 6yarn add @fortawesome/free-regular-svg-icons
 7yarn add @fortawesome/free-brands-svg-icons
 8 
 9# Pro icon styles (Paid feature only)
10yarn add @fortawesome/pro-solid-svg-icons
11yarn add @fortawesome/pro-regular-svg-icons
12yarn add @fortawesome/pro-light-svg-icons
13yarn add @fortawesome/pro-thin-svg-icons
14yarn add @fortawesome/pro-duotone-svg-icons
15yarn add @fortawesome/sharp-solid-svg-icons
16yarn add @fortawesome/sharp-regular-svg-icons
17yarn add @fortawesome/sharp-light-svg-icons
18 
19# Install the Vue Component (required)
20yarn add @fortawesome/vue-fontawesome@latest-3

# Install SVG Core (required)
yarn add @fortawesome/fontawesome-svg-core

# Free icon styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

# Pro icon styles (Paid feature only)
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons

# Install the Vue Component (required)
yarn add @fortawesome/vue-fontawesome@latest-3

After the installation, open your resources/js/app.js file and import the required Fontawesome components and icons. For this example we will be installing the user-secret icon found here:

Copied!

 1/* import the fontawesome core */
 2import { library } from '@fortawesome/fontawesome-svg-core'
 3 
 4/* import the fontawesome icon component */
 5import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 6 
 7/* import specific icons */
 8import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
 9 
10/* add icons to the library */
11library.add(faUserSecret)

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import the fontawesome 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)

Next, you need to attach the font-awesome-icon component to your Vue app. Place the following code where your app returns createApp:

Copied!

1createApp()
2  // ...
3  .component('font-awesome-icon', FontAwesomeIcon)
4  // ...

createApp()
  // ...
  .component('font-awesome-icon', FontAwesomeIcon)
  // ...

Your app.js file should now look like this:

Copied!

 1import './bootstrap'
 2import '../css/app.css'
 3import { createApp, h } from 'vue'
 4import { createInertiaApp } from '@inertiajs/vue3'
 5import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 6import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
 7 
 8/* import the fontawesome core */
 9import { library } from '@fortawesome/fontawesome-svg-core'
10 
11/* import the fontawesome icon component */
12import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
13 
14/* import specific icons */
15import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
16 
17/* add icons to the library */
18library.add(faUserSecret)
19 
20const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'
21 
22createInertiaApp({
23    title: title => `${title} - ${appName}`,
24    resolve: name =>
25        resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
26    setup({ el, App, props, plugin }) {
27        return createApp({ render: () => h(App, props) })
28            .use(plugin)
29            .use(ZiggyVue, Ziggy)
30            .component('font-awesome-icon', FontAwesomeIcon)
31            .mount(el)
32    },
33    progress: {
34        color: '#4B5563',
35    },
36})

import './bootstrap'
import '../css/app.css'
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import the fontawesome 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)

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'

createInertiaApp({
    title: title => `${title} - ${appName}`,
    resolve: name =>
        resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component('font-awesome-icon', FontAwesomeIcon)
            .mount(el)
    },
    progress: {
        color: '#4B5563',
    },
})

Now, you can easily use the font-awesome-icon component within your Vue components as follows:

Copied!

1<font-awesome-icon icon="fa-solid fa-user-secret" />

<font-awesome-icon icon="fa-solid fa-user-secret" />

Conclusion

In this article, we have shown you how to integrate the Fontawesome library into your Laravel 10 project that uses Inertia and Vue 3. By following these steps, you can easily add beautiful icons to enhance your web application's visual appeal. For more details and advanced usage options, refer to the official Fontawesome documentation here.

Feel free to explore more icons and unleash your creativity!