[php] How to Install Font Awesome in Laravel Mix

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

The answer is


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


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

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') }}">

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

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">

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)

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

  1. Install font-awesome library.
npm install font-awesome --save
  1. 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";
  1. Open the following file and paste given code

<you_project_location>/webpack.mix.js

mix.setResourceRoot("../");
  1. 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.


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.

  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!


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

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

Questions with php tag:

I am receiving warning in Facebook Application using PHP SDK Pass PDO prepared statement to variables Parse error: syntax error, unexpected [ Preg_match backtrack error Removing "http://" from a string How do I hide the PHP explode delimiter from submitted form results? Problems with installation of Google App Engine SDK for php in OS X Laravel 4 with Sentry 2 add user to a group on Registration php & mysql query not echoing in html with tags? How do I show a message in the foreach loop? Target class controller does not exist - Laravel 8 Message: Trying to access array offset on value of type null Array and string offset access syntax with curly braces is deprecated Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error How to fix "set SameSite cookie to none" warning? The POST method is not supported for this route. Supported methods: GET, HEAD. Laravel Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib error running php after installing node with brew on Mac What does double question mark (??) operator mean in PHP Post request in Laravel - Error - 419 Sorry, your session/ 419 your page has expired PHP with MySQL 8.0+ error: The server requested authentication method unknown to the client php mysqli_connect: authentication method unknown to the client [caching_sha2_password] Converting a POSTMAN request to Curl Composer require runs out of memory. PHP Fatal error: Allowed memory size of 1610612736 bytes exhausted Expected response code 250 but got code "530", with message "530 5.7.1 Authentication required Issue in installing php7.2-mcrypt Xampp localhost/dashboard How can I run specific migration in laravel How to change PHP version used by composer Laravel 5 show ErrorException file_put_contents failed to open stream: No such file or directory Artisan migrate could not find driver phpMyAdmin ERROR: mysqli_real_connect(): (HY000/1045): Access denied for user 'pma'@'localhost' (using password: NO) Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) laravel 5.5 The page has expired due to inactivity. Please refresh and try again "The page has expired due to inactivity" - Laravel 5.5 How to increment a letter N times per iteration and store in an array? Can't install laravel installer via composer Only on Firefox "Loading failed for the <script> with source" Is there way to use two PHP versions in XAMPP? How to prevent page from reloading after form submit - JQuery laravel Eloquent ORM delete() method No Application Encryption Key Has Been Specified General error: 1364 Field 'user_id' doesn't have a default value How to logout and redirect to login page using Laravel 5.4? How to uninstall an older PHP version from centOS7 How to Install Font Awesome in Laravel Mix PDO::__construct(): Server sent charset (255) unknown to the client. Please, report to the developers Laravel - htmlspecialchars() expects parameter 1 to be string, object given How to downgrade php from 7.1.1 to 5.6 in xampp 7.1.1?

Questions with laravel tag:

Parameter binding on left joins with array in Laravel Query Builder Laravel 4 with Sentry 2 add user to a group on Registration Target class controller does not exist - Laravel 8 Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error The POST method is not supported for this route. Supported methods: GET, HEAD. Laravel How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? Post request in Laravel - Error - 419 Sorry, your session/ 419 your page has expired Expected response code 250 but got code "530", with message "530 5.7.1 Authentication required How can I run specific migration in laravel Laravel 5 show ErrorException file_put_contents failed to open stream: No such file or directory Artisan migrate could not find driver Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) laravel 5.5 The page has expired due to inactivity. Please refresh and try again "The page has expired due to inactivity" - Laravel 5.5 Can't install laravel installer via composer Laravel 5.4 Specific Table Migration laravel Eloquent ORM delete() method Including a css file in a blade template? laravel Unable to prepare route ... for serialization. Uses Closure Laravel 5.4 ‘cross-env’ Is Not Recognized as an Internal or External Command Vue js error: Component template should contain exactly one root element No Application Encryption Key Has Been Specified How to know Laravel version and where is it defined? General error: 1364 Field 'user_id' doesn't have a default value How to Install Font Awesome in Laravel Mix PHP7 : install ext-dom issue Laravel - htmlspecialchars() expects parameter 1 to be string, object given Laravel 5.4 create model, controller and migration in single artisan command Laravel Password & Password_Confirmation Validation Expected response code 250 but got code "535", with message "535-5.7.8 Username and Password not accepted Laravel: PDOException: could not find driver How to validate array in Laravel? Laravel Migration Error: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes Property [title] does not exist on this collection instance Composer: file_put_contents(./composer.json): failed to open stream: Permission denied Laravel Carbon subtract days from current date How to install all required PHP extensions for Laravel? if else condition in blade file (laravel 5.3) change the date format in laravel view page How to set the default value of an attribute on a Laravel model Extension gd is missing from your system - laravel composer Update laravel 5.3 new Auth::routes() The Response content must be a string or object implementing __toString(), "boolean" given after move to psql How to fix error Base table or view not found: 1146 Table laravel relationship table? "Please provide a valid cache path" error in laravel Setting selected option in laravel form Get only specific attributes with from Laravel Collection Get an image extension from an uploaded file in Laravel How to select specific columns in laravel eloquent

Questions with laravel-5 tag:

Expected response code 250 but got code "530", with message "530 5.7.1 Authentication required Laravel 5 show ErrorException file_put_contents failed to open stream: No such file or directory Can't install laravel installer via composer Including a css file in a blade template? No Application Encryption Key Has Been Specified How to Install Font Awesome in Laravel Mix Laravel Migration Error: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes Laravel 5.4 redirection to custom url after login How to set the default value of an attribute on a Laravel model laravel 5.3 new Auth::routes() The Response content must be a string or object implementing __toString(), "boolean" given after move to psql How to fix error Base table or view not found: 1146 Table laravel relationship table? "Please provide a valid cache path" error in laravel How to select specific columns in laravel eloquent How to clear Route Caching on server: Laravel 5.2.37 Laravel migration default value Where are logs located? SQLSTATE[HY000] [2002] Connection refused within Laravel homestead Laravel 5 PDOException Could Not Find Driver Laravel 5.2 - Use a String as a Custom Primary Key for Eloquent Table becomes 0 Eloquent ORM laravel 5 Get Array of ids Get environment value in controller How to redirect to a route in laravel 5 by using href tag if I'm not using blade or any template? Why do I have to run "composer dump-autoload" command to make migrations work in laravel? add new element in laravel collection object Laravel 5 Carbon format datetime How to query between two dates using Laravel and Eloquent? How to get client IP address in Laravel 5+ What is the difference between find(), findOrFail(), first(), firstOrFail(), get(), list(), toArray() Laravel 5: Retrieve JSON array from $request Change Timezone in Lumen or Laravel 5 Call to undefined function App\Http\Controllers\ [ function name ] How to get Current Timestamp from Carbon in Laravel 5 How to get All input of POST in Laravel ReflectionException: Class ClassName does not exist - Laravel Reloading .env variables without restarting server (Laravel 5, shared hosting) Response::json() - Laravel 5.1 How to access URL segment(s) in blade in Laravel 5? laravel 5 : Class 'input' not found Error 405 (Method Not Allowed) Laravel 5 Laravel Request getting current path with query string Laravel password validation rule How to set cookies in laravel 5 independently inside controller Laravel 5 – Clear Cache in Shared Hosting Server How to redirect back to form with input - Laravel 5 Laravel-5 'LIKE' equivalent (Eloquent) how to use php DateTime() function in Laravel 5 Can I do Model->where('id', ARRAY) multiple where conditions? How to set up file permissions for Laravel? Artisan, creating tables in database

Questions with webpack tag:

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 Support for the experimental syntax 'classProperties' isn't currently enabled npx command not found where is create-react-app webpack config and files? How can I go back/route-back on vue-router? webpack: Module not found: Error: Can't resolve (with relative path) Refused to load the font 'data:font/woff.....'it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' The create-react-app imports restriction outside of src directory How to import image (.svg, .png ) in a React Component How to include css files in Vue 2 I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely How to import functions from different js file in a Vue+webpack+vue-loader project How to Install Font Awesome in Laravel Mix Field 'browser' doesn't contain a valid alias configuration Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema How to create multiple page app using react How to add fonts to create-react-app based projects? How to determine the installed webpack version Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type How to decrease prod bundle size? How to use Google fonts in React.js? How to include bootstrap css and js in reactjs app? Angular 2 : No NgModule metadata found angular-cli where is webpack.config.js file - new angular6 does not support ng eject How to add font-awesome to Angular 2 + CLI project webpack command not working Import JavaScript file and call functions using webpack, ES6, ReactJS Getting Unexpected Token Export How to use a jQuery plugin inside Vue 'import' and 'export' may only appear at the top level How to load image files with webpack file-loader Define global variable with webpack Static image src in Vue.js template Correct path for img on React.js How to bundle an Angular app for production Add Favicon with React and Webpack Angular 2: import external js file into component No 'Access-Control-Allow-Origin' header in Angular 2 app How to create multiple output paths in Webpack config webpack is not recognized as a internal or external command,operable program or batch file NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack Webpack how to build production code and how to use it React-Native: Module AppRegistry is not a registered callable module Webpack "OTS parsing error" loading fonts ES6 exporting/importing in index file How to import and export components using React + ES6 + webpack? ES6 modules implementation, how to load a json file "You may need an appropriate loader to handle this file type" with Webpack and Babel babel-loader jsx SyntaxError: Unexpected token How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

Questions with laravel-mix tag:

Laravel 5.4 ‘cross-env’ Is Not Recognized as an Internal or External Command How to Install Font Awesome in Laravel Mix