Back to Blog

Published: Jun 10, 2020

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.

Round up

I hope you enjoyed this small post. If you want to see more, please subscribe. You can also checkout my new website ????.

If you have any questions, contact me!

Follow me on twitter to get notified when I post a new blog @larapeakdev