How to use Font Awesome 5 SVGs with Laravel Blade

Image for post
Image for post

I’ve been a huge fan of Font Awesome from the start and I think they made great improvements with their 5th version.

I’ve not used Font Awesome in a long time and since then I used SVGs almost all the time. So when I decided to use Font Awesome 5 I was a little bit frustrated to see how uneasy it was to use their library.

They push you to use the Javascript integration and I like to avoid Javascript as much as possible for icons.

Today I found a way to use Font Awesome 5 SVGs directly within Blade.

Blade SVG + Font Awesome 5

Blade SVG is a nice little package that adds a new directive for either inline SVG or SVG sprites. As it only supports one spritesheet, I’ll use the inline option.

Here’s how to install it with Composer:

composer require nothingworks/blade-svg

Then publish the config file:

Update the config/blade-svg.php to add the icon class to all the SVGs.

Download Font Awesome 5 (Free or Pro) and copy the advanced-options/raw-svg contents to your application resources/assets/svg directory.

You’re ready, you can start using it in your templates:

You’ll see that by default, the icons are really huge and not styled. That’s why I added the icon class. Here’s how I define it in my CSS:

Voilà! You’re good to go.

Written by

Freelance Web Developer from Belgium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store