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...
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.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') }}">
https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621