Using Font Awesome With Laravel 8.x

(Things to watch out for)

In this article you will learn,

• How to compile SASS in Laravel
• How to use Font Awesome icons in your Laravel Project

Alright so a quick intro for those who do not know already, Laravel is a PHP framework and in my opinion one of the best out there. It is relatively easy to learn and while not absolutely necessary, I do suggest you have an understanding of basic PHP concepts.

• COMPILING SASS IN LARAVEL

Disclaimer: Please use Microsoft’s Visual Studio Code or an Editor with an Integrated Terminal.

As with most developers, I am quite accustomed to using Visual Studio code to compile my SASS/SCSS files, which is very often seeing as even the simplest projects, I write in SASS and would advise anyone to do so.

Laravel however has their way of compiling SCSS files which is just as good as the VSCode extension. Here’s how:

· Install NodeJs if you haven’t already

To do this visit Nodejs.org and download and install on your computer, to check if successfully installed, in your command terminal enter npm –v it should show your version.

After installing Node, open your laravel project and from here we would need to install the dependencies listed in the package.json file. This is done by running:

npm install

in your command line, (Check to make sure that the directory is your project’s directory). This installs mix, a package that Laravel uses to mix SCSS files.

This creates a webpack.mix.js file, and in this file you should see something like:

If not already in the file add this code:

.sass(’resources/scss/style.scss’, 'public/css’);

What this does is to look for a scss file called ‘style’ that is nested in a folder called scss that is in your resources folder, compile it and puts it as a css file in the css folder nested in your public folder. You can change the name in this code to anything you want like app.scss or main.scss.

So go to your resources folder, if you haven’t already, create a file with the same name as that in your line of code. Write your code in your scss file and then to compile;

Run npm run dev in your terminal and this will compile it into css as requested. However when you make changes to your scss file it doesn’t update so the next thing is to:

Run npm run watch and so changes made will be updated to the css file.

T0 use this css file in your blade.php file reference the css by doing:

<link rel="stylesheet" href=" {{mix ('css/style.css')}}">

By default, laravel looks in your public directory so we do not need to write public in the href folder.

And that’s all

• USE FONT AWESOME ICONS IN LARAVEL

Quick Introduction: Font Awesome is a font and icon toolkit based on CSS and Less.

To get started, in your terminal run:

npm install (if you have already, no need)
npm install --save @fortawesome/fontawesome-free

To check If it has been installed in your package.json file you should see it as a dependency:

"dependencies": { "@fortawesome/fontawesome-free": "^5.15.1" }

This installs the files directly to your node_modules folder, then to your sass file add the following lines of code:

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

Then once again compile your sass using npm run dev and then npm run watch.

Then reference the compiled css file, if you haven’t already done so by doing:

<link rel="stylesheet" href=" {{mix ('css/style.css')}}">

Then in your blade.php file proceed to using the file.

Here is some absolute do-not when trying to use Font Awesome:

· Do not use a font-family in basic reset

*, *::before, *::after { font-family: ‘Font-name’, sans-serif; }

This interferes with laravel’s default font-family.

· It is also important that you import more than the fontawesome scss file as it alone does not bring the icons.

ENJOY!