marvinlabs / laravel-html-font-awesome
A fluent html builder for Font Awesome icons
Fund package maintenance!
vpratfr
Installs: 1 736
Dependents: 0
Suggesters: 0
Security: 0
Stars: 14
Watchers: 4
Forks: 3
Open Issues: 1
Requires
- php: ^7.0
- spatie/laravel-html: ^2.19.0
README
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 bonjour@vincentprat.info 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.