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...
This question is related to
php
laravel
laravel-5
webpack
laravel-mix
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.
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
Build your webpack.mix.js configuration.
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
This dependency entry should now be in your package.json.
// Font Awesome
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
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') }}">
https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621
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">
npm install font-awesome --save@import "~font-awesome/scss/font-awesome.scss"; in resources/assets/saas/app.scssnpm run dev (or npm run watch or even npm run production)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";
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
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 for Laravel 7
npm install font-awesome --save
<you_project_location>/resources/sass/app.scss
@import "~font-awesome/scss/font-awesome";
<you_project_location>/webpack.mix.js
mix.setResourceRoot("../");
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.
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.
npm install font-awesome --save
add ~/ before path
@import "~/font-awesome/scss/font-awesome.scss";
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!
Try in your webpack.mix.js to add the '*'
.copy('node_modules/font-awesome/fonts/*', 'public/fonts')
Source: Stackoverflow.com