Laravel 5.7 + Font Awesome

by

Laravel 5.7 through 7.x using Font Awesome 5 (The Right Way)

Build your webpack.mix.js configuration.

mix.setResourceRoot('../');
mix.setPublicPath('public')

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/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/sass/app.scss import one or more styles.

// Font Awesome
@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') }}">

More Related Contents:

  1. Laravel 5.4 ‘cross-env’ Is Not Recognized as an Internal or External Command
  2. laravel5: chdir(): No such file or directory (errno 2)
  3. Laravel change migration order
  4. Laravel Eloquent Relations: ->latest()
  5. How to get client IP address in Laravel 5+
  6. The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths. laravel 5.3
  7. Laravel parse error: syntax error, unexpected T_CLASS, expecting T_STRING or T_VARIABLE
  8. Cannot download file from storage folder in laravel 5.4
  9. What is the –save option for npm install?
  10. What is the difference between “npm install” and “npm ci”?
  11. How to use private Github repo as npm dependency
  12. Module not found: Error: Can’t resolve ‘crypto’
  13. Laravel: How can I change the default Auth Password field name?
  14. Purpose of installing Twitter Bootstrap through npm?
  15. No Application Encryption Key Has Been Specified
  16. How to change / Custom password field name for Laravel 4 and Laravel 5 user authentication [duplicate]
  17. Font Awesome 5 unicode
  18. How to fix the “Base table or view not found: 1146” error when running ‘php artisan migrate’ command?
  19. How to properly upgrade node using nvm
  20. Error ‘tunneling socket’ while executing npm install
  21. npm install doesn’t create node_modules directory
  22. Unable to create new react app with npx create-react-app
  23. How to vertically align text with icon font?
  24. DeprecationWarning: Buffer() is deprecated due to security and usability issues when I move my script to another server
  25. What is the difference between queue:work –daemon and queue:listen
  26. Laravel – How to get current user in AppServiceProvider
  27. How can I reference package version in npm script?
  28. JavaScript dependency management: npm vs. bower vs. volo [closed]
  29. laravel 5.3 new Auth::routes()
  30. Fontawesome is not working when project is built with grunt

Leave a Comment