Using Font Awesome icons in Laravel

24 June 2019 | Laravel, open source, PHP

Yesterday I released a new Laravel package which makes it very easy to implement Font Awesome and will decrease your website size drastically in the progress. LaraFontAwesome adds blade directives that are replaced with their Font Awesome SVG counterparts on the server side before sending to the client.

<!-- Turns this -->
<!-- Into this -->
<svg viewBox="0 0 512 512" class="svg-inline--fa fa-w-16 fa-circle">
    <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/>

The advantage of working this way is that there is no need to load the entire JavaScript font library or a full web font file. The only additional resource needed to display this icon correctly is a 4kb stylesheet that gets injected automatically. Icons are also displayed immediately and do not need to be rendered after the dom has been loaded, making the website look a lot faster.

An example of this package in production is this website. The implementation reduced the total size of the homepage from ~500kb to just ~95kb un-gzipped.

Jeroen Deviaene
I am a full-stack web developer from West-Flanders who enjoys creating applications and websites using frameworks such as Laravel, VueJs and Tailwind CSS.
Looking for a Laravel developer?
Contact me