I want to add Font Awesome in my Laravel 8/Tailwind CSS 2.0.1 application, and after searching, I install it the following way.
npm install font-awesome --save
Then I add the line in the file /mnt/_work_sdb8/wwwroot/lar/Hostels4/resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import "node_modules/font-awesome/scss/font-awesome.scss";
I get an error.
ERROR in ./resources/css/app.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Failed to find 'node_modules/font-awesome/scss/font-awesome.scss'
But I found the referenced file in...
node_modules/font-awesome/scss$ ls -la
total 105
drwxrwxrwx 1 root root 4096 May 21 14:12 .
drwxrwxrwx 1 root root 4096 May 21 14:12 ..
-rwxrwxrwx 1 root root 715 Oct 25 2016 _animated.scss
-rwxrwxrwx 1 root root 592 Oct 25 2016 _bordered-pulled.scss
-rwxrwxrwx 1 root root 459 Oct 25 2016 _core.scss
-rwxrwxrwx 1 root root 120 Oct 25 2016 _fixed-width.scss
-rwxrwxrwx 1 root root 430 Oct 25 2016 font-awesome.scss
-rwxrwxrwx 1 root root 50498 Oct 25 2016 _icons.scss
-rwxrwxrwx 1 root root 375 Oct 25 2016 _larger.scss
-rwxrwxrwx 1 root root 378 Oct 25 2016 _list.scss
-rwxrwxrwx 1 root root 1637 Oct 25 2016 _mixins.scss
-rwxrwxrwx 1 root root 783 Oct 25 2016 _path.scss
-rwxrwxrwx 1 root root 672 Oct 25 2016 _rotated-flipped.scss
-rwxrwxrwx 1 root root 134 Oct 25 2016 _screen-reader.scss
-rwxrwxrwx 1 root root 482 Oct 25 2016 _stacked.scss
-rwxrwxrwx 1 root root 22644 Oct 25 2016 _variables.scss
And in webpack.mix.js file resources/css/app.css is included by install:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
$ node -v
v14.16.0
$ npm -v
7.14.0
$ php artisan --version
Laravel Framework 8.42.1
What is wrong, and how can it be fixed?
MODIFIED : I found referenced dir with files :
/node_modules/font-awesome/css$ ls -la
total 100
drwxrwxrwx 1 root root 0 May 21 14:12 .
drwxrwxrwx 1 root root 4096 May 21 14:12 ..
-rwxrwxrwx 1 root root 37414 Oct 25 2016 font-awesome.css
-rwxrwxrwx 1 root root 21778 Oct 25 2016 font-awesome.css.map
-rwxrwxrwx 1 root root 31000 Oct 25 2016 font-awesome.min.css
But modifying file resources/css/app.css:
@import "node_modules/font-awesome/css/font-awesome.css";
I still see error :
ERROR in ./resources/css/app.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Failed to find 'node_modules/font-awesome/css/font-awesome.css'
It seems that I set the path/filename correctly, but why the error?
I found decision for free version:
Install with command
npm install --save @fortawesome/fontawesome-freeI
In app.js added
require('@fortawesome/fontawesome-free/js/all.min.js');
line With this https://fontawesome.com/icons?d=gallery&p=2&m=free acessible icons