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

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
schutte
  • 1,949
  • 7
  • 25
  • 45

5 Answers5

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

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
  • 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 '20 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')
tempra
  • 2,455
  • 1
  • 12
  • 27
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-*">
thefabdev
  • 753
  • 1
  • 7
  • 20
  • is it for all icons Sir or I need to import each icon? I want all icons – schutte Nov 30 '19 at 11:21
  • You need to import only the icons needed in your application. This method should work fine. – thefabdev Nov 30 '19 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 '19 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
Amit Senjaliya
  • 2,867
  • 1
  • 10
  • 24
-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>

novecentonove
  • 359
  • 5
  • 14