How to Install Font Awesome in Laravel Mix
PhpLaravelLaravel 5WebpackLaravel MixPhp Problem Overview
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...
Php Solutions
Solution 1 - Php
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.
Solution 2 - Php
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
Solution 3 - Php
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
Solution 4 - Php
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">
Solution 5 - Php
For Laravel >= 5.5
- Run
npm install font-awesome --save
- Add
@import "~font-awesome/scss/font-awesome.scss";
inresources/assets/saas/app.scss
- Run
npm run dev
(ornpm run watch
or evennpm run production
)
Solution 6 - Php
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";
Solution 7 - Php
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
Solution 8 - Php
Solution for Laravel 7
- Install font-awesome library.
> npm install font-awesome --save
- After installing the library. Open the following file and paste given code
> @import "~font-awesome/scss/font-awesome";
- Open the following file and paste given code
> mix.setResourceRoot("../");
-
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.
Solution 9 - Php
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
Solution 10 - Php
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),
Solution 11 - Php
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.
Solution 12 - Php
npm install font-awesome --save
add ~/ before path
@import "~/font-awesome/scss/font-awesome.scss";
Solution 13 - Php
I found all answers above incomplete somehow, Below are exact steps to get it working.
-
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
-
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');
-
Run the following command in order to execute Laravel Mix:
npm run dev
-
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" />
-
Use font awesome icons in templates like
<i class="fa fa-address-book" aria-hidden="true"></i>
I hope it helps!
Solution 14 - Php
Try in your webpack.mix.js to add the '*'
.copy('node_modules/font-awesome/fonts/*', 'public/fonts')