rishi85's avatar

can't get font-awesome to work with laravel mix

I've done the following to try and get font awesome to work but i cannot get the icons to display.

npm-install

npm install font-awesome

Then added the following to the app.scss file:

@import "~font-awesome/scss/font-awesome.scss";

and then run npm run dev

When i then try to use an icon nothing displays on the view...

Please help

0 likes
9 replies
rin4ik's avatar

try this

npm install font-awesome --save-dev

In your app.scss file add this

$fa-font-path: "../../../node_modules/font-awesome/fonts" !default;

@import 'node_modules/font-awesome/scss/font-awesome.scss';
rishi85's avatar

I've also put a link to the app.css in the view like this:

is this correct?

Sorry i'm a newbie

rishi85's avatar

I get the following error when running npm run dev watch:

Entry module not found: Error: Can't resolve 'watch' in 'C:\xampp\htdocs\fontawesome'

however when i run npm run dev it compiles but still doesn't work

rin4ik's avatar

just run without dev

npm run watch
rishi85's avatar

Hi i'm just getting a blank square i've included the css file in the view like so:

link rel="stylesheet" href="css/app.css"

rin4ik's avatar

include like this

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
jorgepirelarivas's avatar

The problem is that when you compile the fonts folder in the public directory you can see in app.css that it put url (/ fonts/vendor/@fortawesome.... and the correct thing should be url (../fonts/vendor/@fortawesome....

jorgepirelarivas's avatar

The correct way in app.scss is:

 $fa-font-path: "../webfonts";
 @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
 @import '~@fortawesome/fontawesome-free/scss/solid.scss';
 @import '~@fortawesome/fontawesome-free/scss/brands.scss';
 @import '~@fortawesome/fontawesome-free/scss/regular.scss';
syamsoul's avatar

for font-awesome v5.15

  1. npm install --save @fortawesome/fontawesome-free

  2. insert in .scss file

$fa-font-path: "/webfonts";
@import '~@fortawesome/fontawesome-free/css/all.min';
1 like

Please or to participate in this conversation.