4

I already installed Fontawesome in my package.json.

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2" ,
    //etc.
},
"dependencies": { "font-awesome": "^4.7.0" }

and import it to my app.scss

@import "~font-awesome/scss/font-awesome.scss";

I tried <i class="fa fa-edit"></i> and <i class="fas fa-edit"></i> but it just shows like this below, someone knows how to do this correctly?

enter image description here

5
  • Have you used npm ? Nov 30, 2019 at 10:52
  • @AmitSenjaliya thats on my package.json i just npm install
    – schutte
    Nov 30, 2019 at 10:55
  • And then you have installed npm install --save-dev @fortawesome/fontawesome-free Right? or not? Nov 30, 2019 at 10:56
  • 1
    @AmitSenjaliya yes Sir, well in fact font-awesome is already in my node_modules folder
    – schutte
    Nov 30, 2019 at 10:57
  • You should provide solid.scss path in the app.scss file. Nov 30, 2019 at 11:05

5 Answers 5

18

Laravel 6 & 7 using Font Awesome 5 (The Right Way)

Build your webpack.mix.js configuration.

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

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

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

https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621

1
  • 1
    This is the only solution that worked for me although by now the dependency shows ^5.12.1, but that's a minor detail. The key for my installation to compile correctly was to run npm install @fortawesome/fontawesome-free --save. That step is crucial.
    – Zeke
    Feb 16, 2020 at 15:49
8

Firstly import all fontawesome-icons in your app.scss

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

Second, and most important that you missed is to copy the webfonts to your public folder. In you webpack.mis.js append this below.

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')
0
2

I would suggest you try this

npm install @fortawesome/fontawesome @fortawesome/fontawesome-free-solid -D

In the resources/assets/js folder, create a new file fontawesome.js

In the file you can import fontawesome and all icons.

import fontawesome from '@fortawesome/fontawesome';

import fas from '@fortawesome/fontawesome-free-solid';

fontawesome.library.add(fas);

In resources/assets/js/app.js

require('./fontawesome');

Now run npm run dev to compile

Then you can use needed icon in your view

<i class="fas fa-*">
3
  • is it for all icons Sir or I need to import each icon? I want all icons
    – schutte
    Nov 30, 2019 at 11:21
  • You need to import only the icons needed in your application. This method should work fine.
    – thefabdev
    Nov 30, 2019 at 11:23
  • hmm. so I need to add icons whenever I have another one. thanks for your time Sir, but I want all icons so that if I have another one I dont need to specify.
    – schutte
    Nov 30, 2019 at 11:28
-1

As you said you have already installed font-awesome package.

app.scss

Add this line:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

@import '~@fortawesome/fontawesome-free/scss/solid.scss';

And then

npm run watch
3
  • this time its shows none Sir, already inspect element. the font-awesome is present, but shows none.
    – schutte
    Nov 30, 2019 at 11:12
  • @gecko You should add fontawesome-free in the import path Nov 30, 2019 at 11:37
  • it goes back again like the image above.
    – schutte
    Nov 30, 2019 at 11:56
-1

My solution:

from the doc: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

npm install --save @fortawesome/fontawesome-free

Then, in app.js I imported 'all.js':

import fontawesome from '@fortawesome/fontawesome-free/js/all.js';

After npm run watch now I see the icons as <i class="fas fa-search"></i>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.