Font Awesome est une des bibliothèques d’icônes les plus populaires. Elle propose des centaines d’icônes dans sa version gratuite et peut être étendue a plusieurs milliers en version payante. Une fois installée correctement, pour afficher une icône dans une vue blade, il faut ajouter une balise <i class="fa-solid fa-arrow-down-1-9"></i> avec la classe correspondant à l’icône voulue.
Créer une directive blade Font Awesome
Pour faciliter l’intégration d’icônes à vos vues, Laravel permet la création de directives Blade. Une directive Blade est un raccourcis pour retourner du contenu, par exemple @csrf qui ajoute le champ avec le token de protection CSRF.
Pour créer une directive Blade, il faut aller dans le fichier app/providers/AppServiceProvider.php et modifier la méthode boot(). On va ensuite utiliser la façade Blade pour déclarer notre directive: Blade::directive(...)
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Blade::directive('icon', fn ($expression) => "<i class=\"fas fa-{{ $expression }}\"></i>");
}Une fois la directive blade font awesome déclarée, on peut maintenant ajouter très simplement des icônes dans nos vues en utilisant la syntaxe @icon('icon-class'). Par exemple:
<p>
<span>@icon('user-plus')</span>
<strong class="text-2xl">Créer un utilisateur</strong>
</p>