How To Update My Version Of Font Awesome Dependency

Using Font Awesome With Laravel viii.ten

(Things to sentry 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 then a quick intro for those who do not know already, Laravel is a PHP framework and in my opinion i of the best out in that location. It is relatively easy to learn and while not absolutely necessary, I exercise suggest you have an understanding of basic PHP concepts.

• COMPILING SASS IN LARAVEL

Disclaimer: Please utilise Microsoft'southward Visual Studio Lawmaking or an Editor with an Integrated Concluding.

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 practise so.

Laravel nonetheless has their style of compiling SCSS files which is just as good equally the VSCode extension. Here'south how:

· Install NodeJs if you haven't already

To practise this visit Nodejs.org and download and install on your computer, to bank check if successfully installed, in your command terminal enter npm –v information technology should evidence 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 washed by running:

          npm install        

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

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

If non already in the file add this code:

          .sass('resources/scss/way.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 binder, compile it and puts information technology every bit a css file in the css folder nested in your public binder. You can change the proper noun in this code to anything yous want similar app.scss or chief.scss.

So go to your resources folder, if you oasis't already, create a file with the aforementioned name equally that in your line of code. Write your lawmaking in your scss file then to compile;

Run npm run dev in your terminal and this will compile it into css every bit requested. Still when you make changes to your scss file information technology doesn't update and then the adjacent affair is to:

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

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

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

By default, laravel looks in your public directory and then we do not need to write public in the href binder.

And that's all

• Utilise 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 accept already, no need)          npm install --salvage @fortawesome/fontawesome-complimentary        

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

          "dependencies": { "@fortawesome/fontawesome-gratuitous": "^v.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-costless/scss/regular";        

Then again compile your sass using npm run dev and then npm run lookout man.

And so reference the compiled css file, if you lot haven't already done and so by doing:

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

And then in your blade.php file proceed to using the file.

Hither is some accented exercise-not when trying to apply Font Crawly:

· Practise not utilize a font-family unit in basic reset

          *, *::before, *::afterwards { font-family: 'Font-proper name', sans-serif; }        

This interferes with laravel'southward default font-family.

· It is likewise important that you import more than the fontawesome scss file every bit it alone does non bring the icons.

Bask!

Source: https://medium.com/swlh/using-font-awesome-with-laravel-8-x-1f80cb6d8f10

Posted by: robinsonhans1996.blogspot.com

Share this post