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-freeThe 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 😎.