in Laravel

Using Font-Awesome With Laravel

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.

Install Font-Awesome

First you need to install font-awesome, the easiest way to do this is to import it using npm

npm install font-awesome --save-dev

Include Font-Awesome Stylesheet

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.

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

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;

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

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 /public/fonts/vendor/font-awesome folder.

Subscribe To The Weekly Newsletter

Get weekly updates to your email