A fluent html builder for Font Awesome icons

v1.1.0 2019-10-10 07:01 UTC

This package is auto-updated.

Last update: 2020-05-01 00:17:37 UTC


Latest Version on Packagist Software License Total Downloads


This package is an extension on top of Spatie laravel-html package to easily produce font awesome markup.


You can install the package via composer:

composer require marvinlabs/laravel-html-font-awesome

If you are using Laravel 5.5, the service provider and facade will automatically be discovered.

On earlier versions, you need to do that manually.

You must install the service provider:

// config/app.php
'providers' => [

And optionally register an alias for the facade.

// config/app.php
'aliases' => [
    'FA' => MarvinLabs\Html\FontAwesome\Facades\FontAwesome::class,



Here are two equivalent ways to output the beer icon. The first one allows full auto-completion. While the second one uses a little magic to automatically transform the method name into the icon name.

{!! fa()->icon('beer') !!}
{!! fa()->beer() !!}

When the icon name contains dashes (aka kebab case), you should use the camel case equivalent (remove dashes, and capitalize each word after the first one).

{!! fa()->icon('window-close') !!}
{!! fa()->windowClose() !!}

If you want to use different icon styles provided by FontAwesome 5, you can easily add a style parameter to the fa() or use different helpers for the corresponding icon style. (You can also set the default style in the config file)

{!! fa('r')->icon('address-book') !!}
{!! far()->icon('address-book') !!}


You can chain methods to affect the icon.

{!! fa()->icon('repeat')->spin()->size('2x') !!}


You can also easily replace the list bullets by custom icons.

<ul class="fa-ul">
    <li>{!! fa()->checkSquareO()->forList() !!} Item 1</li>
    <li>{!! fa()->squareO()->forList() !!} Item 2</li>
    <li>{!! fa()->checkSquareO()->forList() !!} Item 3</li>
    <li>{!! fa()->checkSquareO()->forList() !!} Item 4</li>


You can also produce icon stacks (two icons on top of each other).

The stack method should receive an array containing exactly two items. The items can be associative or not.

If you pass simple strings, those are considered to be the icon name.

{!! fa()->stack([ 'square-o', 'beer', ]) !!}

If the item is a key => value association, the key is considered to be the icon name, and the value will be the CSS classes added to the icon element.

{!! fa()->stack([ 'square', 'beer' => 'fa-inverse', ]) !!}

An item can also simply be created as described above by chaining methods.

{!! fa()->stack([ 'square', fa()->icon('beer')->inverse()->flip(), ]) !!}

Finally, you can also add any CSS class to the stack, like the ones for sizing (refer to the Font Awesome documentation).

{!! fa()->stack([ 'square-o', 'beer', ])->addClass('fa-5x') !!}

Styles and scripts

Output the latest minified Font Awesome CSS link using the maxCDN URL

{!! fa()->css() !!}


Please see CHANGELOG for more information what has changed recently.


If you discover any security related issues, please email instead of using the issue tracker.



  • jyhsu2000 (Support for FontAwesome 5 compatibility)


The MIT License (MIT). Please see License File for more information.