0

I installed Fontawesome 5 using

npm i --save @fortawesome/fontawesome-free

Edited my app.scss by adding:

@import '~@fortawesome/fontawesome-free/css/all.css';

Using Laravel 5.7. The icons works when I access using php artisan serve (http://127.0.0.1:8000/) but when direct access through xampp (localhost/project/public), it shows as square. Do you have any idea? thank you.

Marc Roger Sambrano Bacordio
  • 35
  • 5
  • Hi, have you found the solution? This happens with me also, I realize the webfa font files are mounted to localhost root path causing a 404 erro, but can't fix it – Ademir Mazer Jr - Nuno Jan 02 '19 at 20:00
  • 1
    Sorry for the late reply. I haven't found a fix. I just access the site using php artisan serve. Direct access to the laravel public folder won't work. Vhosts trick also works. In addition, php -S 127.0.0.1:8080 -t public works if you don't want php artisan serve. You can change the address to your IP. And it's great because other computers in the localhost can connect. – Marc Roger Sambrano Bacordio Jan 19 '19 at 14:30
  • Does this answer your question? [Laravel 5.7 + Font Awesome](https://stackoverflow.com/questions/52433486/laravel-5-7-font-awesome) – Karl Hill Jun 09 '20 at 04:29

1 Answers1

3

The solution is to define your public path in laravel mix, because xampp use another root-path then php artisan serve.

http://localhost/myproject/public/index.php     //xampp
http://127.0.0.1:8000/index.php                 //serve

1 install fontawesome:

npm i @fortawesome/fontawesome-free

2 Add to your /resources/sass/app.scss:

$fa-font-path:  "webfonts/" !default;
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

3 Add to your header:

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

4 Add to your webpack.mix.js in your root folder:

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

5 Add some icons into your blade-files, f.E.

<i class="fas fa-user"></i>

6. Run: 

npm run dev
Tenarius
  • 540
  • 1
  • 5
  • 23
  • How importing only a specific icon? This import method results in big source files. – Cloonix Jan 01 '20 at 15:50
  • Instead `@import '~@fortawesome/fontawesome-free/css/all.css';`, import an specific font. Take a look into your `node_modules/fortawesome` Folder. – Tenarius Jun 04 '21 at 08:12