How to use Font Awesome 5 icons in Laravel 6 [duplicate]

Question

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?

Augmenter

Have you used npm ? – Pius

@AmitSenjaliya thats on my package.json i just npm install – Augmenter

And then you have installed npm install --save-dev @fortawesome/fontawesome-free Right? or not? – Pius

@AmitSenjaliya yes Sir, well in fact font-awesome is already in my node_modules folder – Augmenter

You should provide solid.scss path in the app.scss file. – Pius

Answer 1

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

Niple

Answer 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-*">

Horus

is it for all icons Sir or I need to import each icon? I want all icons – Augmenter

You need to import only the icons needed in your application. This method should work fine. – Horus

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. – Augmenter

Answer 3

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

Pius

this time its shows none Sir, already inspect element. the font-awesome is present, but shows none. – Augmenter

@gecko You should add fontawesome-free in the import path – Pius

it goes back again like the image above. – Augmenter

Answer 4

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>

Zeldazelde