How to Install Font Awesome in Laravel Mix

Question

I've tried to install Font Awesome using Laravel Mix but when executing run npm dev I get the following message:

ERROR Failed to compile with 1 errors
error in ./~/font-awesome/scss/font-awesome.scss Module build failed: /** ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (line 1, column 1)

I removed the comments in the file and tried to change font paths, but it did not solve the problem.

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

fontawesome.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

_variable.scss

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;
// Continue...

Ma

Pay attention to the mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); Part in the question. – Lupercalia

Answer 1

To install font-awesome you first should install it with npm. So in your project root directory type:

npm install font-awesome --save

(Of course I assume you have node.js and npm already installed. And you've done npm install in your projects root directory)

Then edit the resources/assets/sass/app.scss file and add at the top this line:

@import "node_modules/font-awesome/scss/font-awesome.scss";

Now you can do for example:

npm run dev

This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:

npm run production

And then you can use the font.

Arsenical

In Laravel 5.5, this worked for me: @import "~font-awesome/scss/font-awesome.scss"; – Liddy

i should say this helped me since i forgot to update app.scss file but the url is changed , in my situation it is @import "node_modules/font-awesome-sass/assets/stylesheets/_font-awesome.scss"; – Brackely

yarn is much faster than npm so you can do yarn add font-awesome --save – Upholsterer

Once I had a problem with fontawesome. Tried all, downloaded, npm installed. but then found the problem frontend developer wrote a code in css *{} for every tag, and I deleted that code then fontawesome workd perfect – Australopithecus

Note that this won't install the latest free version of Font Awesome. It will only install version + [email protected]. – Authorship

don't forget to add .fa, .fas { font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free", "Font Awesome 5 Pro"; } if you find out your brand icon is not showing – Kearney

for me it works if use .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts'); at webpack.mix.js then after that npm run dev – Vimen

ERROR in ./resources/css/app.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve 'node_modules/font-awesome/scss/font-awesome.scss' in '/resources/css' – Frilling

Answer 2

For Font Awesome 5(webfont with css) and Laravel mixin add package for font awesome 5

npm i --save @fortawesome/fontawesome-free

And import font awesome scss in app.scss or your custom scss file

@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

compile your assets npm run dev or npm run production and include your compiled css into layout

Gloriagloriana

Thank you, it almost worked for me. All I had to do is change the order of lines and move @import '~@fortawesome/fontawesome-free/scss/fontawesome'; to the top of the imports of font-awesome. – Lapidify

upvoted! do you really need all 4 of these files, i thought ~@fortawesome/fontawesome-free/scss/fontawesome would be sufficient – Silurid

Answer 3

How to Install Font Awesome 5 in Laravel 5.3 - 5.6 (The Right Way)

Build your webpack.mix.js configuration.

mix.setPublicPath('public');
mix.setResourceRoot('../');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Install the latest free version of Font Awesome via a package manager like npm.

npm install @fortawesome/fontawesome-free --save-dev

This dependency entry should now be in your package.json.

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

In your main SCSS file /resources/assets/sass/app.scss, import one or more styles.

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

Compile your assets and produce a minified, production-ready build.

npm run production

Finally, reference your generated CSS file in your Blade template/layout.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

How to Install Font Awesome 5 with Laravel Mix 6 in Laravel 8 (The Right Way)

https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621

Authorship

I also had to include the CSS in /resources/assets/sass/app.scss (prefix import with @): import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; import "~@fortawesome/fontawesome-free/scss/solid.scss"; – Airport

I can't get it to work without adding .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') to my webpack.mix.js – Workwoman

same here, I had to copy webfonts to public, otherwise I get a 404 not found error referring to the webfonts folder.. should update the answer, methinks. – Ellette

in laravel 7.4 the webpack config is already built, thus i have just to npm command and then add to scss file and then run npm run whatver-you-want-here and all done – Jaclin

Answer 4

This is for new users who are using Laravel 5.7(and above) and Fontawesome 5.3

npm install @fortawesome/fontawesome-free --save

and in app.scss

@import '~@fortawesome/fontawesome-free/css/all.min.css';

Run

npm run watch

Use in layout

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Disclaimer

This should be in the top since laravel 5.7 is the current stable build. I've tried all above tips but nothing worked for me except for this one. All I was missing was the link part to put in my header. Thanks alot! :) – Periosteum

This should be accepted answer as the others only work for older versions of laravel – Edger

Still getting a /webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404 when trying to load the font using this method. What does the code look like to render the icon on the page? – Amby

I also had to copy the font in the webpack.mix.js mix .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') – Ellieellinger

@Aditya your lucky, its not working for me can you give me fresh laravel 6.*? – Fai

It's missing css & font copy syntax in mix file. – Dy

This worked with the latest version of FA and Laravel 5.5, thanks! – Kommunarsk

Answer 5

For Laravel >= 5.5

• Run npm install font-awesome --save
• Add @import "~font-awesome/scss/font-awesome.scss"; in resources/assets/saas/app.scss
• Run npm run dev (or npm run watch or even npm run production)

Axon

Answer 6

I am using Laravel 5.5.14 and none of the above worked for me. So here are the steps I did to make it work.

1.Install font-awesome by using npm:

   npm install font-awesome --save

2.Move the fonts to your public directory by adding this line in your webpack.mixin.js

mix.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');

3.Open your app.scss to specify the path of the fonts in your node_modules and which relative path to use for compilation:

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";

Abie

$fa-font-path: "../../../public/fonts/font-awesome" !default; This will work as we shall provide relative path to the font directory. – Libratory

Why can't we use an absolute path here e.g. "/fonts/font-awesome" !default; ? – Bokbokhara

Note that this won't install the latest free version of Font Awesome. It will only install version + [email protected]. – Authorship

Answer 7

first install fontawsome using npm

npm install --save @fortawesome/fontawesome-free

add to resources\sass\app.scss

// Fonts
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

and add to resources\js\app.js

require('@fortawesome/fontawesome-free/js/all.js');

then run

npm run dev

or

npm run production

Amethyst

Answer 8

Solution for Laravel 7

1. Install font-awesome library.

npm install font-awesome --save

2. After installing the library. Open the following file and paste given code

<you_project_location>/resources/sass/app.scss

@import "~font-awesome/scss/font-awesome";

3. Open the following file and paste given code

<you_project_location>/webpack.mix.js

mix.setResourceRoot("../");

4. As per your environment execute command.

npm run dev

or

npm run production

There is no need to copy and paste the font folder to the public folder, all will be handled automatically.

Incontrovertible

note mix.setResourceRoot("../"); in this answer, very useful. – Spinescent

mix.setResourceRoot("../"); worked like charm ! Thanks – Crooked

This should be accepted answer as this is works for the latest version of Laravel, just did a fresh install today. mix.setResourceRoot("../"); was a lifesaver! @Spinescent and @Emad Saeed should up-vote this answer – Hourglass

By installing the font-awesome package, you're actually missing some of the fonts such as solid. It's better to install @fortawesome/fontawesome-free which includes all fonts. – Quince

This actually installs the old version of font awesome 4.7.0 – Quince

Answer 9

Laravel 9 and fontawesome 6.1

composer create-project laravel/laravel:^9 laravel-9

cd laravel-9

npm i --save-dev @fortawesome/fontawesome-free@^6.1.0

create file resources/sass/app.scss

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

replace webpack.mix.js by

const mix = require('laravel-mix');

// set path to laravel public directory
//mix.setPublicPath('public');

// path to laravel public directory from public/css/app.css
mix.setResourceRoot("../");

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Add to your view

<script src="{{ mix('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />

Note: When done correctly, the font files are automatically copied to the public directory. You do not need to copy them manually as seen here in many answers.

Note: If your laravel site is in a subfolder (http://domain/site/), make sure to add mix_url to config/app.php

    // laravel mix assets url
    'mix_url' => env('APP_URL', null),

Quince

Answer 10

the path you are using is not correct you could just open the node_module and find the path of font-awesome. use could use js or svg font but i prefer the css style.

at first use this command to install font-awesome-free npm install --save-dev @fortawesome/fontawesome-free

after that you can do this

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

and I copy the font path like below this is optional

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts');

and finally just run the script npm run dev or npm run watch in laravel

Obstetrician

Answer 11

I have recently written a blog about it for the Laravel5.6. Link to blog is https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

The steps are similar to above description. But in my case, I had to do extra steps like configuring the webfonts path to font-awesome in "public" directory. Setting the resource root in Laravel mix etc. You can find the details in the blog.

I am leaving the link here so it helps people for whom the mentioned solutions don't work.

Witwatersrand

Thank you, I tried almost all of the other provided answers, and only this solved my problem. – Shoreless

Answer 12

npm install font-awesome --save

add ~/ before path

@import "~/font-awesome/scss/font-awesome.scss";

Shorter

Worked before, now got an error. This fixed it: @import "~font-awesome/scss/font-awesome"; – Spectral

Answer 13

I found all answers above incomplete somehow, Below are exact steps to get it working.

1. We use npm in order to install the package. For this open the Console and go to your Laravel application directory. Enter the following:

   npm install font-awesome --save-dev

2. Now we have to copy the needed files to the public/css and public/fonts directory. In order to do this open the webpack.mix.js file and add the following:

   mix.copy('node_modules/font-awesome/css/font-awesome.min.css', 'public/css'); mix.copy('node_modules/font-awesome/fonts/*', 'public/fonts');

3. Run the following command in order to execute Laravel Mix:

   npm run dev

4. Add the stylesheet for the Font Awesome in your applications layout file (resources/views/layouts/app.blade.phpapp.blade.php):

   <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />

5. Use font awesome icons in templates like

   <i class="fa fa-address-book" aria-hidden="true"></i>

I hope it helps!

Dy

Answer 14

Try in your webpack.mix.js to add the '*'

.copy('node_modules/font-awesome/fonts/*', 'public/fonts')

Horal

I'm not a scss specialist but it seems it asks where to import from. From the fontawasome site itself you may have to add at line 1 @fa-font-path: "../font"; It has to be a relative path so in laravel it will probable be "../../../public/font" – Horal

Copying is fine, but I feel that importing the .scss file into app.scss inside of font-awesome works better. – Florous

Thanks, i think this should be selected as best answer. – Hovey