How to use Font Awesome 5 icons in Laravel 6

laravel font-awesome laravel-6 font-awesome-5 fontawesome-4.4.0
gecko picture gecko · Nov 30, 2019 · Viewed 8.1k times · Source

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

Answer

Karl Hill picture Karl Hill · Dec 1, 2019

Laravel 6 & 7 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.15.1",

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

Related questions

How Do I Get the Query Builder to Output Its Raw SQL Query as a String?

Given the following code: DB::table('users')->get(); I want to get the raw SQL query string that the database query builder above will generate. In this example, it would be SELECT * FROM users. How do I do …

Read More
How to Create Multiple Where Clause Query Using Laravel Eloquent?

I'm using the Laravel Eloquent query builder and I have a query where I want a WHERE clause on multiple conditions. It works, but it's not elegant. Example: $results = User::where('this', '=', 1) ->where('that', '=', 1) …

Read More
How to remove a package from Laravel using composer?

What is the correct way to remove a package from Laravel using composer? So far I've tried: Remove declaration from composer.json (in "require" section) Remove any Class Aliases from app.php Remove any references to the package from my …

Read More