mdixon18/fontawesome
A Laravel package for integrating Font Awesome icons into your app, with Blade directives and helpers for rendering icons, managing icon sets, and keeping templates clean. Simplifies consistent icon usage across views and components.
Install via Composer:
composer require mdixon18/fontawesome
Laravel's package discovery will register the service provider automatically. If you're on an older Laravel version, add Mdixon18\Fontawesome\FontawesomeServiceProvider to config/app.php manually.
Publish the config file so you can tune defaults:
php artisan vendor:publish --provider="Mdixon18\Fontawesome\FontawesomeServiceProvider"
This drops a config/fontawesome.php where you'll typically configure:
fa fa-user) vs. 5/6 (fas fa-user, fa-solid fa-user).First use case — drop the Blade directive into any view:
<i>@fa('user')</i>
This renders the <i> (or <span>) tag with the correct classes for your configured version. That's the whole pitch: no more remembering whether it's fa fa-user, fas fa-user, or fa-solid fa-user across a dozen Blade templates.
Where to look first:
config/fontawesome.php — the version prefix and asset toggle are what most "it doesn't work" reports trace back to.src/ directory — it's small; read the Blade directive compilation and helper function to understand exactly what HTML gets emitted.<link> tag). Don't double-load.Blade directive with modifiers. The directive accepts additional arguments for extra classes and attributes. The general shape:
@fa('check-circle', ['class' => 'text-success', 'title' => 'Done'])
Use this to compose icon buttons without hand-writing markup:
<button class="btn btn-primary">
@fa('save') Save
</button>
Helper function in PHP. Where a Blade directive doesn't fit — for example, an array of menu items rendered in a loop, or a service class generating navigation config — use the helper and echo {!! !!}:
{!! fa('home') !!}
Or capture the HTML:
$icon = fa('envelope');
Loop-driven iconography. The pattern that pays off most is iterating over a config array of icon definitions:
@foreach ($menu as $item)
<a href="{{ $item['url'] }}" class="nav-link">
@fa($item['icon']) {{ $item['label'] }}
</a>
@endforeach
Centralize icon slugs in a config or database column so designers can swap them without touching Blade.
Wrapping in your own component. For anything beyond the trivial case, wrap the directive in a Blade component or a small view partial that also handles sizing, spacing, and accessibility:
{{-- resources/views/components/icon.blade.php --}}
@props(['name', 'size' => null])
@fa($name, ['class' => $size ? "fa-{$size}" : ''])
Then @php echo $icon @endphp-style usage gives you a single place to enforce aria-hidden="true" on decorative icons and aria-label on meaningful ones.
Pairing with tooltips / Popover libraries. Because you control the rendered class list, you can inject data-* attributes through the second argument and let Bootstrap or similar pick them up:
@fa('info-circle', ['data-bs-toggle' => 'tooltip', 'title' => 'More info'])
Asset strategy. Two clean approaches:
Version mismatch is the number-one failure mode. If icons render as empty squares, you're almost certainly emitting FA5 classes (fas) against an FA4 stylesheet, or vice versa. Check config/fontawesome.php against the actual Font Awesome CSS loaded on the page. When in doubt, view-source and inspect the rendered <i> element.
Don't double-load the stylesheet. If the package is injecting Font Awesome via CDN and your layout has a <link> to Font Awesome, you'll get FOUT/FOIC symptoms and occasionally duplicate icon-font registrations. Pick one source of truth.
{!! fa() !!} vs {{ fa() }}. The helper returns raw HTML; using escaped output will render literal <i> tags on the page. If you can, prefer the Blade directive — it's harder to get wrong.
Config cache. Changes to config/fontawesome.php won't take effect while the config is cached. Run php artisan config:clear (or config:cache again) after edits — especially when debugging why a version switch "didn't work."
Accessibility. Icons that convey meaning (a "delete" trash icon, an "edit" pencil) need aria-label or visually hidden text; purely decorative ones should get aria-hidden="true". The package won't do this for you — bake it into a wrapper component early so it isn't a retrofit later.
Small package, small community. With ~15 stars and a single maintainer, treat it as a convenience wrapper rather than a foundation. Pin the version in composer.json, and if you ever need to drop it, replacing @fa('x') with <i class="fas fa-x"></i> or a project-local Blade component is trivial — which is a good argument for wrapping the directive in your own component from day one. That way the dependency is swappable behind a single view file.
No PHPStan/type coverage. Passing an invalid argument shape (e.g., a string where the second argument expects an array) will fail at render time, not compile time. If you're building a component around it, validate icon names against a small allowlist or enum for a better developer experience.
Escape hatches. Font Awesome transformations (fa-rotate-90, fa-flip-horizontal, fa-spin) and stacking (fa-stack) aren't first-class citizens of the directive — pass them through the extra classes array:
@fa('spinner', ['class' => 'fa-spin'])
If those patterns become common, extend your wrapper component with named boolean props (:spin="true", :rotate="90") rather than scattering string classes across templates.
Debugging order when an icon is blank: (1) inspect the emitted class prefix; (2) confirm the stylesheet is loaded (Network tab, look for all.min.css or similar); (3) confirm the icon name exists in the FA version you're using — many icons were renamed between v4 and v5; (4) clear config cache. That sequence resolves 95% of issues with this package.
How can I help you explore Laravel packages today?