How to use Font Awesome 5 icons in Laravel 6

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?

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

Answer 2

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>

Answer 3

Laravel 6.x+ using Font Awesome 5 (The Right Way)

Build your webpack.mix.js configuration.

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

This dependency entry should now be in your package.json.

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",

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

Answer 4

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

Answer 5

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