I triying to include Font Awesome in Laravel 5.7.
I done this :
1) npm install --save-dev @fortawesome/fontawesome-free --I check the folders in node_modules and all ok
$fa-font-path: "../webfonts"; // Bootstrap @import '~bootstrap/scss/bootstrap'; @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss'; @import '~@fortawesome/fontawesome-free/scss/solid.scss'; @import '~@fortawesome/fontawesome-free/scss/regular.scss'; @import '~@fortawesome/fontawesome-free/scss/brands.scss';
3) Then :
npm run development -- --watch
4) And then, I see files in public/fonts/vendor/@fortawesome/fontawesome-free/ But when I go to the browser , the icons looks like this :
For Laravel 5.7+ and Font Awesome 5
Run...
npm i @fortawesome/fontawesome-free
This should now be in your package.json...
// Font Awesome "dependencies": { "@fortawesome/fontawesome-free": "^5.4.1",
In /resources/js/bootstrap.js add this line...
require('@fortawesome/fontawesome-free');
In /resources/sass/app.scss add this line...
@import "~@fortawesome/fontawesome-free/css/all.css";
In /resources/sass/_variables.scss add this line...
$fa-font-path: "../fonts" !default;
Make sure your webpack.mix.js file has something like this...
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
Lets compile all our assets and produce a production-ready build...
npm run production
Finally, reference your new CSS & JS files in your layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}"> <script src="{{ mix('js/app.js') }}"></script>
