How to Install Font Awesome in Laravel Mix

Question

I ve tried to install Font Awesome using Laravel Mix but when executing run npm dev I get the following message      ERROR  Failed to compile with 1 errors   error  in     font-awesome scss font-awesome scss   Module build   failed         Invalid CSS after     load the styles       expected 1   selector or at-rule  was  var content   requi  in    var www html blog node modules font-awesome scss font-awesome scss    line 1  column 1    I removed the comments in the file and tried to change font paths  but it did not solve the problem   webpack mix js  mix js  resources assets js app js    public js       sass  resources assets sass app scss    public css       copy  node modules font-awesome fonts     public fonts       sass  node modules font-awesome scss font-awesome scss    public css       version      fontawesome scss   import  variables    import  mixins    import  path    import  core    import  larger    import  fixed-width    import  list    import  bordered-pulled    import  animated    import  rotated-flipped    import  stacked    import  icons    import  screen-reader      variable scss     Variables    --------------------------   fa-font-path             fonts   default   fa-font-size-base    14px  default   fa-line-height-base  1  default      fa-font-path            netdna bootstrapcdn com font-awesome 4 7 0 fonts   default     for referencing Bootstrap CDN font files directly  fa-css-prefix        fa  default   fa-version            4 7 0   default   fa-border-color       eee  default   fa-inverse            fff  default   fa-li-width           30em   14   default     Continue

User · Answer

To install font-awesome you first should install it with npm. So in your project root directory type:

npm install font-awesome --save

(Of course I assume you have node.js and npm already installed. And you've done npm install in your projects root directory)

Then edit the resources/assets/sass/app.scss file and add at the top this line:

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

Now you can do for example:

npm run dev

This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:

npm run production

And then you can use the font.

User · Answer

For Font Awesome 5 webfont with css  and Laravel mixin add package for font awesome 5  npm i --save  fortawesome fontawesome-free   And import font awesome scss in app scss or your custom scss file   import    fortawesome fontawesome-free scss brands    import    fortawesome fontawesome-free scss regular    import    fortawesome fontawesome-free scss solid    import    fortawesome fontawesome-free scss fontawesome     compile your assets  npm run dev or npm run production and include your compiled css into layout

User · Answer

How to Install Font Awesome 5 in Laravel 5 3 - 5 6  The Right Way  Build your webpack mix js configuration  mix setResourceRoot  quot     quot     mix js  resources assets js app js    public js       sass  resources assets sass app scss    public css     Install the latest free version of Font Awesome via a package manager like npm  npm install  fortawesome fontawesome-free  This dependency entry should now be in your package json     Font Awesome  quot dependencies quot          quot  fortawesome fontawesome-free quot    quot  5 15 2 quot    In your main SCSS file  resources assets sass app scss  import one or more styles   import    fortawesome fontawesome-free scss fontawesome    import    fortawesome fontawesome-free scss regular    import    fortawesome fontawesome-free scss solid    import    fortawesome fontawesome-free scss brands    Compile your assets and produce a minified  production-ready build  npm run production  Finally  reference your generated CSS file in your Blade template layout   lt link type  quot text css quot  rel  quot stylesheet quot  href  quot    mix  css app css      quot  gt   How to Install Font Awesome 5 with Laravel Mix 6 in Laravel 8  The Right Way  https   gist github com karlhillx 89368bfa6a447307cbffc59f4e10b621

User · Answer

first install fontawsome using npm  npm install --save  fortawesome fontawesome-free   add to resources sass app scss     Fonts  import    fortawesome fontawesome-free scss fontawesome     and add to resources js app js  require   fortawesome fontawesome-free js all js      then run  npm run dev   or  npm run production

User · Answer

I have recently written a blog about it for the Laravel5 6  Link to blog is https   www samundra com np integrating-font-awesome-with-laravel-5 x-using-webpack 1574  The steps are similar to above description  But in my case  I had to do extra steps like configuring the webfonts path to font-awesome in  public  directory  Setting the resource root in Laravel mix etc  You can find the details in the blog   I am leaving the link here so it helps people for whom the mentioned solutions don t work

User · Answer

I am using Laravel 5 5 14 and none of the above worked for me  So here are the steps I did to make it work   1 Install font-awesome by using npm      npm install font-awesome --save   2 Move the fonts to your public directory by adding this line in your webpack mixin js  mix copyDirectory  node modules font-awesome fonts    public fonts font-awesome      3 Open your app scss to specify the path of the fonts in your node modules and which relative path to use for compilation    fa-font-path      fonts font-awesome   default   import   font-awesome scss font-awesome scss

User · Answer

npm install font-awesome --save   add    before path    import    font-awesome scss font-awesome scss

User · Answer

Solution for Laravel 7  Install font-awesome library    npm install font-awesome --save    After installing the library  Open the following file and paste given code   lt you project location gt  resources sass app scss   import  quot  font-awesome scss font-awesome quot      Open the following file and paste given code   lt you project location gt  webpack mix js  mix setResourceRoot  quot     quot       As per your environment execute command    npm run dev or npm run production  There is no need to copy and paste the font folder to the public folder  all will be handled automatically

User · Answer

This is for new users who are using Laravel 5 7 and above  and Fontawesome 5 3  npm install  fortawesome fontawesome-free --save   and in app scss   import    fortawesome fontawesome-free css all min css     Run  npm run watch   Use in layout   lt link href     asset  css app css       rel  stylesheet  gt

User · Answer

Try in your webpack mix js to add the        copy  node modules font-awesome fonts      public fonts

User · Answer

I found all answers above incomplete somehow  Below are exact steps to get it working   We use npm in order to install the package  For this open the Console and go to your Laravel application directory  Enter the following  npm install font-awesome --save-dev  Now we have to copy the needed files to the public css and public fonts directory  In order to do this open the webpack mix js file and add the following  mix copy  node modules font-awesome css font-awesome min css    public css    mix copy  node modules font-awesome fonts      public fonts     Run the following command in order to execute Laravel Mix  npm run dev  Add the stylesheet for the Font Awesome in your applications layout file  resources views layouts app blade phpapp blade php    lt link href  quot    asset  css font-awesome min css      quot  rel  quot stylesheet quot    gt   Use font awesome icons in templates like  lt i class  quot fa fa-address-book quot  aria-hidden  quot true quot  gt  lt  i gt    I hope it helps

User · Answer

the path you are using is not correct you could just open the node module and find the path of font-awesome  use could use js or svg font but i prefer the css style   at first use this command to install font-awesome-free npm install --save-dev  fortawesome fontawesome-free  after that you can do this   import    fortawesome fontawesome-free scss fontawesome    import    fortawesome fontawesome-free scss regular    import    fortawesome fontawesome-free scss solid    import    fortawesome fontawesome-free scss brands     and I copy the font path like below this is optional   copy  node modules  fortawesome fontawesome-free webfonts    public fonts      and finally just run the script npm run dev or npm run watch in laravel

User · Answer

For Laravel    5 5   Run npm install font-awesome --save Add  import   font-awesome scss font-awesome scss   in resources assets saas app scss Run npm run dev  or npm run watch or even npm run production

[php] How to Install Font Awesome in Laravel Mix

Examples related to php

Examples related to laravel

Examples related to laravel-5

Examples related to webpack

Examples related to laravel-mix