How can I use fontawesome icons in a laravel application using vite?

Question

I have installed @fortawesome/fontawesome-free package using npm. The latest Laravel application uses vite by default. I am unable to solve this issue. Any help would be much appreciated. My vite.config.js is

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
            'resources/admin/css/app.css',
            'resources/admin/js/app.js',
            'resources/css/glide.css',
            'resources/js/glide.js',
            'resources/js/Sortable.js',
            'resources/js/tinymce.js',
            'resources/sass/app.scss',
            'resources/admin/sass/app.scss',
        ]),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        },
        viteStaticCopy({
            targets: [
                {
                    src: 'node_modules/@fortawesome/fontawesome-free/webfonts',
                    dest: '',
                },
            ],
        }),
    ],
});

I imported fontawesome scss files in app.scss. My app.scss file contains

@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/v4-shims";

I tried using a third party library https://github.com/sapphi-red/vite-plugin-static-copy to copy webfonts of fontawesome package. Is there a better way than this?

It's specifically /webfonts that needs to be copied to /webfonts public, I expect the rest of the lib to be included by @import — Estus Flask
– Estus Flask, Commented Jul 11, 2022 at 10:08
@parth there is no error. when I run npm run build, everything works because I have used viteStaticCopy which is a third party plugin. But when I run npm run dev, it cannot find the path at resources/webfonts/. I could use the same package in this case too, but I found this way a bit hacky and hoping for a better solution. — sajendra
– sajendra, Commented Jul 12, 2022 at 13:29
@EstusFlask yes I copied the webfonts using a third-party plugin. But I found this method a bit hacky when using vite. I was wondering if there is a better way to solve this issue. When using laravel mix, it automatically handles the webfont directory. We didn't have to do the extra stuff. — sajendra
– sajendra, Commented Jul 12, 2022 at 13:36

sajendra · Accepted Answer · 2022-07-14 18:20:07Z

7

I solved it by first installing sass pre-processor:

npm install -D sass

after that I imported all fontawesome scss files into my app.js file:

import './bootstrap';
import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/brands.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';
import '@fortawesome/fontawesome-free/scss/v4-shims.scss';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

answered Jul 14, 2022 at 18:20

sajendra

4372 gold badges4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harsh Patel · Accepted Answer · 2023-04-30 06:32:07Z

in Laravel 9 OR Above, by default Laravel use Vite to bundle your application's CSS and JavaScript files into production ready assets.

Now if you need to use FontAwesome with Vite in laravel then you can do it as below way.

Step 1:- Run npm i @fortawesome/fontawesome-free command for install Font Awesome. by running above command fontawesome will be installed in "node_modules" directory (full path:- {root_dir}/node_modules/@fortawesome/fontawesome-free).

Step 2:- Open {root_dir}/vite.config.js file and add below path in this file

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            // add below path of fontawesome
            '~fontawesome': path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-free'), // <- add this line

        }
    },
});

Step 3:- Now open {root_dir}/resources/sass/app.scss file & import fontawesome scss as like below

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// for FontAwesome v6+
$fa-font-path: '~fontawesome/webfonts';
@import '~fontawesome/scss/fontawesome';
@import '~fontawesome/scss/brands';
@import '~fontawesome/scss/solid';

Note that, in last step we import the fontawesome files. but that import path may different. here currently I used latest version (6.4) of FontAwesome. Refer this for more read about "how to use fontAwesome with Sass"

Eldair · Accepted Answer · 2022-07-14 10:29:01Z

1

It is quite easy if you are not adding it via npm. Copy entire fontawesome dir into resources dir (/resources/fontawesome), then declare variable in your scss file like (assuming you are doing it in a file inside /resources/sass:

$fa-font-path: '../fontawesome/webfonts';

and import fontawesome files:

@import '../fontawesome/scss/brands';
@import '../fontawesome/scss/solid';
@import '../fontawesome/scss/light';
@import '../fontawesome/scss/fontawesome';

Build script will copy files to your /public/build/assets dir and change urls and dev script will load them from your resources dir.

answered Jul 14, 2022 at 10:29

Eldair

158 bronze badges

Comments

Michaël · Accepted Answer · 2023-10-18 13:57:26Z

1

More simple way ! the js file of the package has everything !

1 Install the package

npm install @fortawesome/fontawesome-free

2 Import it in resources/js/app.js only what you need to minimize the size.

@import '@fortawesome/fontawesome-free/js/fontawesome';

@import '@fortawesome/fontawesome-free/js/solid';

3 Enjoy

<i class="fa-solid fa-sort"></i>

You also need to have sass installed. Nothing to change in vite conf.

My vite conf if you need :

import {defineConfig, preprocessCSS} from 'vite';
import laravel from 'laravel-vite-plugin';
import * as path from "path";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

edited Oct 18, 2023 at 13:57

answered Oct 18, 2023 at 13:42

Michaël

5494 silver badges8 bronze badges

Collectives™ on Stack Overflow

How can I use fontawesome icons in a laravel application using vite?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related