In this tutorial we're going to learn how to use Font-awesome in our Laravel projects while using webpack and mix to compile our assets to use on the front-end.
First you need to install font-awesome, the easiest way to do this is to import it using
npm install font-awesome --save-dev
After you have installed font-awesome using npm you'll have all the files you need in your node_modules folder. You can use either LESS or SASS with font-awesome, I prefer to use SASS so I'll use that in this tutorial. To include the font-awesome stylesheet in your profile, open your main app.scss file and import the font-awesome.scss file by using the following code.
If you now run
npm run watch to compile your CSS you will get an error saying the font-awesome fonts can not be found. Therefore you need to change the font directory that it path variable by using the following code. $fa-font-path: "../../../node_modules/font-awesome/fonts" !default;
This time when you compile the SASS file using
npm run watch it will compile the file correctly and you'll now notice the fonts have been copied into your
Get weekly updates to your email