Laravel: Font Awesome 5

By | February 9, 2018

Assalamualaikum / Hi,

Today, I’m going to share how to include the new Font Awesome 5 in your Laravel application. You will need Node.js to do so – see Laravel Mix.

So to start with let’s, consider that you have your fresh Laravel application created, you need to install all front-end dependencies then install Font Awesome 5.

Create resources/assets/js/font-awesome.js and in resources/assets/js/font-awesome.js add the following:

Next, in webpack.mix.js, add the following:

In terminal run npm run production.

Once you’re done, you may use Font Awesome 5 in your application. See Font Awesome 5 for the icons available.

Please take note, this is for free Font Awesome 5. For Pro, you just need the license key and replace the word `free` to `pro` during installing the package

Training on Web Development with Laravel Framework (Advanced) at Barracuda Campus, Cyberjaya (08 Feb 2018). Interested to learn? Check out our website at Cleanique Coders or email us for further enquiry.

8 thoughts on “Laravel: Font Awesome 5

  1. Evan

    Thank you for this post! This was a helpful starting point to getting FA5 integrated into my existing Laravel app. I do want to note one issue I ran into and the resolution.

    The method you are using in font-awesome.js will cause a console error. To avoid this use import instead of require (see the details of this github issue – https://github.com/FortAwesome/Font-Awesome/issues/12278)

    Reply
    1. nasrulhazim.m Post author

      You are right Evan! I have those error you mentioned.

      I’ve tried using `import`, and it works. I will update my post afterwards.

      Reply
  2. sufi

    Thanks for the post..save lot of my time..i have a question..
    whats the different putting ” .js(‘resources/assets/js/font-awesome.js’, ‘public/js’) ” inside webpack.mix.js instead putting ” require(‘./font-awesome’); ” inside js/app.js

    Reply
  3. I G

    This guide doesn’t work anymore with the new FA implmenentation. Can you please update the guide with the new implemtation? Thanks.

    Reply
    1. nasrulhazim.m Post author

      any errors? so far not encountered any errors – even with new Laravel project.

      Reply
      1. I G

        If you run npm update your packages won’t work anymore. FA adopted new packagenames, which makes the ‘old’ packages don’t work anymore. I temporary fixed it by including fontawesome in my header, but your NPM way was better I think. So an update would be nice.

        Reply

Leave a Reply to sufi Cancel reply

Your email address will not be published. Required fields are marked *

1 + 10 =