Font Awesome fluent HTML builder

About

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

Installation

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' => [
    ...
    MarvinLabs\Html\FontAwesome\FontAwesomeServiceProvider::class,
];

And optionally register an alias for the facade.

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

Usage

Icons

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') !!}

Modifiers

You can chain methods to affect the icon.

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

Lists

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>
</ul>

Stacks

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() !!}

Changelog

Please see CHANGELOG for more information what has changed recently.

Security

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

Credits

• Spatie agency for the base package

Contributors

• jyhsu2000 (Support for FontAwesome 5 compatibility)

License

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