Install Font Awesome in Laravel 7.x and Tailwindcss

Hello everybody! Today I want to share a little guide with you that describes how to install Font Awesome in a Laravel project.

Currently I am working on a website for this blog (I will tell you more about it soon). For this project I am using the following stack:

I am using Tailwindcss for the styling of the website. I really like the css framework, but one drawback is the lack of an icon pack.

Before I start using Tailwindcss I was using Bootstrap. Bootstrap ships with Font Awesome out of the box. I like the simplicity of the use of icons.

<i class="fas fa-user"></i>

With this simple html tag, you have a nice user icon.

Installation in Laravel with npm

I wanted Font Awesome in my Laravel project, but the installation was a little bit harder than I was expecting. There was not much documentation on this topic, that’s why I am writing this guide.

The first step is to install Font Awesome with npm.

npm install --save @fortawesome/fontawesome-free

The next step is to include the Font Awesome css in the app.scss file at the top.

@import '~@fortawesome/fontawesome-free/css/all.css';

This is where I struggled with the installatoin. I thought that it would work right now. So, I added the html class to my design. But it didn’t work…

After a long research on the web I saw this post on laracast.com. The only thing we must do is add the following line of code to the webpack.mix.js file.

mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts');

That’s it! Now you can use the Font Awesome icons in your project.

Roundup

I hope you enjoyed this small post. If you want to see more, please subscribe. Follow me also on Twitter 😎.

Leave a comment

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