17

I'm trying to include the Font Awesome toolkit in Laravel 5.7.

These are the steps I took:

1) Run npm install --save-dev @fortawesome/fontawesome-free

2) Check the folders in node_modules/ and everything looks OK.

$fa-font-path: "../webfonts";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

3) Then I ran...

npm run development -- --watch

4) I see files in public/fonts/vendor/@fortawesome/fontawesome-free/.

However, when I go to the browser the icons look like this:

down_icon

Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Nico
  • 173
  • 1
  • 1
  • 6

2 Answers2

44

Laravel 5.7 through 7.x using Font Awesome 5 (The Right Way)

Build your webpack.mix.js configuration.

mix.setResourceRoot('../');
mix.setPublicPath('public')

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') }}">
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
  • 1
    Hello buddy! Thanks for answered. I done that, but : ERROR Failed to compile with 15 errors13:30:59 These relative modules were not found:* ./@fortawesome//fa-brands-400.eot in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/sass/app.scss ...etc.... and .... ERROR in ./resources/sass/app.scss Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './@fortawesome//fa-brands-400.eot' in \resources\sass' ...etc... Thanks!! – Nico Sep 21 '18 at 16:33
  • I could with the first option, but in a **new** project, I don't know why don't in the other project.... – Nico Sep 22 '18 at 16:14
  • Do you know how delete the Font Awesome's files and begin again ? – Nico Sep 22 '18 at 16:16
  • 1
    @Nico Yes, you can delete the @fortawesome/ folder in public/fonts/vendor. rm -rf /Users/Nico/Sites/laravel/public/fonts/vendor/@fortawesome/ – Karl Hill Oct 10 '18 at 01:11
  • So do I keep the `` default link as well add the link you provided above? I see that one has `mix` and the other has `asset` in it. – whisk Oct 09 '19 at 12:12
  • 1
    @whisk Use one or the other. – Karl Hill Oct 09 '19 at 14:18
  • If still does not work, add this to your mix file `mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');` – devfaysal Nov 06 '19 at 07:18
11

update your webpack.mix.js configuration as below: 

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

type 'npm run dev' in your terminal and hit enter

MUHAMMED IQBAL PA
  • 3,152
  • 2
  • 15
  • 23