How to use Font Awesome 5 icons in Laravel 6
Solution 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')
Solution 2
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
Solution 3
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-*">
schutte
Updated on June 04, 2022Comments
-
schutte almost 2 years
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?