Installer Font Awesome via npm et laravel-mix dans Laravel

Mis à jour il y a 3 ans

Un tutoriel pour télécharger la police d’écriture Font Awesome via npm dans un projet Laravel, l’importer et le compiler avec laravel-mix puis afficher les icônes sur une page web.

Commenter

Offrir un café

Auteur

Wilo A.

Domaine

Développement web

Technologies

Laravel, HTML, CSS

Sommaire

Introduction
Télécharger Font Awesome via npm
Importer les fichiers Sass de Font Awesome
Compiler les assets avec laravel-mix
Utiliser Font Awesome sur une page web

Voir aussi Un tutoriel pour afficher les données d'une collection Laravel dans des items avec plusieurs colonnes responsives dans un carrousel (carousel) Bootstrap 5. En savoir plus

Introduction

Font Awesome est une police d’écriture (police de caractères) qui permet d’insérer des icônes sur une page web à partir des propriétés CSS liées aux icônes.

Nous allons voir dans ce guide comment télécharger Font Awesome dans un projet Laravel en utilisant npm, importer ses fichiers Sass et les compiler avec laravel-mix puis afficher les icônes sur une page web.

Télécharger Font Awesome via npm

Dans un nouveau projet Laravel (je suis à la version 8.46), lorsqu’on affiche le contenu du fichier /package.json, on retrouve les dépendances npm suivantes :

"devDependencies": {
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14"
}

Comme nous allons utiliser « laravel-mix » pour compiler les fichiers CSS et Javascripts, téléchargons-le en exécutant la commande npm suivante :

npm install laravel-mix

Une fois laravel-mix téléchargé, nous pouvons poursuivre avec le téléchargement de Font Awesome Free (0$) en exécutant la commande npm suivante :

npm install --save @fortawesome/fontawesome-free

Cette commande télécharge @fortawesome/fontawesome-free/ dans le répertoire /node_modules. Le fichier /package.json est aussi mis à jour, présentant la version installée de Font Awesome :

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3"
}

Pour Font Awesome Pro :

npm install --save @fortawesome/fontawesome-pro

Importer les fichiers Sass de Font Awesome

Nous allons importer Font Awesome à partir de ses fichiers Sass (.scss). Pour ce faire, créons un fichier app.scss dans le dossier /resources/scss/ (Créez ce dossier s'il n'existe pas).

Au fichier /resources/scss/app.scss, insérons les lignes suivantes pour importer les fichiers .scss de Font Awesome avec les styles d'icônes « solid », « regular » et « brands » depuis le répertoire /node_modules :

/* Importation de Font Awesome */
@import "~@fortawesome/fontawesome-free/scss/fontawesome";

/* Importation des styles d'icones */
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/brands";

Compiler les assets avec laravel-mix

Pour compiler les fichiers Sass de Font Awesome vers /public/app.css, nous devons nous assurer d'avoir référencé le fichier /resources/scss/app.scss au fichier /webpack.mix.js de la manière suivante :

mix.js('resources/js/app.js', 'public/js')
    .sass("resources/scss/app.scss", "public/css");

Il nous sera demandé les modules « sass-loader », « sass » et « resolve-url-loader » lors de la compilation avec laravel-mix. Nous pouvons déjà les installer en exécutant la commande npm suivante :

npm install sass-loader@^11.0.1 sass resolve-url-loader@^3.1.2 --save-dev --legacy-peer-deps

Ce qui me donne la configuration suivante au fichier /package.json :

"devDependencies": {
    "axios": "^0.21",
    "laravel-mix": "^6.0.19",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.34.1",
    "sass-loader": "^11.0.1"
},
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3"
}

Finalement on exécute la commande npm suivante pour compiler les assetsJavascript et Sass :

npm run dev

Cette commande compile le fichier /resources/scss/app.scss vers /public/css/app.css puis importe les fonts Font Awesome dans /public/fonts/vendor/@fortawesome/fontawesome-free/ :

Remarque : Lors de la compilation avec la version "sass": "^1.34.0", une erreur s'est produite suite à l'opérateur / utilisé pour la division dans certains fichiers .scss de Font Awesome. A partir de sa version 1.33.0, Sass recommande d'utiliser math.div(). (Voir documentation Sass).

J'ai regressé sass à la version 1.32.13 et la compilation a bien marché :

npm install sass@^1.32.13

Utiliser Font Awesome sur une page web

Une fois la compilation terminée, nous devons importer le fichier /public/app.css dans une page web (template Blade) pour utiliser les classes de Font Awesome :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel - Fontawesome</title>

        <!-- Importation de /public/css/app.css -->
        <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
        
    </head>
    <body>
    </body>
</html>

Font Awesome présente les classes suivantes pour les différents styles d’icônes :

« fas » : icônes de style « Solid » (Free)
« far » : icônes de style « Regular » (Pro)
« fal » : icônes de style « Light » (Pro)
« fad » : icônes de style « Duotone » (Pro)
« fab » : icônes « Brands » (Free)

A chacune de ces classes nous devons ajouter une autre classe avec le préfixe « fa- » suivi du nom du caractère (nom de l'icône) à afficher à travers une balise <span> ou <i> de la manière suivante :

<span class="fas fa-home" ></span>
<span class="far fa-credit-card" ></span>
<span class="fal fa-car" ></span>
<span class="fab fa-amazon" ></span>

La page Icons chez fontawesome.com présente la liste de toutes les icônes disponibles. Prenons un cas d'utilisation d'icônes pour clotûrer ce tutoriel :

Exemple : Les boutons sociaux Facebook, Twitter, Github et Youtube

<!-- Bouton Facebook -->
<button><span class="fab fa-facebook"></span> Facebook</button>

<!-- Bouton Twitter -->
<button><span class="fab fa-twitter"></span> Twitter</button>

<!-- Bouton Githbub -->
<button><span class="fab fa-github"></span> Github</button>

<!-- Bouton Youtube -->
<button><span class="fab fa-youtube"></span> Youtube</button>

Ce qui me donne le rendu suivant dans Google Chrome :

A vous maintenant de vous amuser à produire du beau avec les nombreuses icônes de Font Awesome !

Portez-vous bien.

#laravel #html #css

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil