Intégrer Font Awesome à vos projets Bootstrap 4 avec SCSS

Si vous ne connaissez pas encore Font Awesome, il est temps de vous y intéresser. Font Awesome est une formidable bibliothèque d’icônes au format font (adapté pour le web). Quand la bibliothèque de Bootstrap 3 propose un assortiment plutôt restraint de font, FA lui, utilise pas moins de 605 icônes à l’heure actuelle. Télécharger les éléments nécessaires Dans un […]

Posté le par Benoît Philibert|3036 vues

Si vous ne connaissez pas encore Font Awesome, il est temps de vous y intéresser. Font Awesome est une formidable bibliothèque d’icônes au format font (adapté pour le web). Quand la bibliothèque de Bootstrap 3 propose un assortiment plutôt restraint de font, FA lui, utilise pas moins de 605 icônes à l’heure actuelle.

Télécharger les éléments nécessaires

Dans un premier temps nous allons devoir télécharger Bootstrap 4 (en version 4.0.0 alpha 2), ainsi que la dernière version complète de Font Awesome (en version 4.5.0).

Récupérer les fichiers Font Awesome

Une fois le téléchargement complété, nous devons récupérer les éléments utiles à notre besoin. Il s’agit ici du dossier SCSS complet.

Dossier SCSS
Dossier SCSS

À l’intérieur de ce dossier nous allons retrouver le fichier principal font-awesome.scss ainsi que tout les fichiers SCSS utilisée par Font Awesome. Les « sous-fichiers » se distinguent par un underscore en préfixe tel que _animated.scss contrairement au fichier principal regroupant ces derniers.

Copions tout les « sous-fichiers » pour les coller dans le dossier SCSS de Bootstrap en créant un sous dossier de votre choix. Attention de bien respecter cette étape au risque d’écraser les fichiers _mixins.scss, _variables.scss.

Fichier Font Awesome dans le dossier Bootstrap
Fichier Font Awesome dans le dossier Bootstrap

 

Relier les nouveaux fichiers à Bootstrap

Nous venons de copier/coller les « sous-fichiers » dans un dossier « FontAwesome » au sein du dossier SCSS de Bootstrap. À présent, ouvrons le fichier font-awesome.scss dans un éditeur de texte afin de récupérer le code.

/*!
* Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";

Ce code permet d’importer les différents « sous-fichiers » dans un même fichier CSS qui sera automatiquement généré (soit par la compilation CSS manuelle ou soit par un logiciel tel que CodeKit). En résumé, ce sont les liens vers les fichiers SCSS de Font Awesome que nous allons copier/coller dans le fichier principal de Bootstrap.

Après avoir copié ce code, ouvrons le fichier bootstrap.scss afin de le coller à l’intérieur. Une fois le collage effectué, il nous faut éditer chaque lien menant aux « sous-fichiers » de Font Awesome.

En effet, rappelons-nous que nous avons créé un dossier « FontAwesome » dans lequel nous avions collé les fichiers. Cela rajoute forcément une étape dans les chemins de liaisons actuels. Nous devons rajouter la liaison FontAwesome/

/*!
* Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/

@import "FontAwesome/variables";
@import "FontAwesome/mixins";
@import "FontAwesome/path";
@import "FontAwesome/core";
@import "FontAwesome/larger";
@import "FontAwesome/fixed-width";
@import "FontAwesome/list";
@import "FontAwesome/bordered-pulled";
@import "FontAwesome/animated";
@import "FontAwesome/rotated-flipped";
@import "FontAwesome/stacked";
@import "FontAwesome/icons";

Il ne nous reste plus qu’a sauvegarder et le tour est joué ! À présent, chaque fois que vous compilerez votre code SCSS, le fichier bootstrap.css sera généré et intègrera les ressources Font Awesome avec lui !

Afin de connaitre les différentes icônes disponibles, vous pouvez directement vous diriger sur l’onglet icons de FontAwesome.


Ces articles pourraient vous intéresser

Tags

2 commentaires

    • Julien Sibille
    • (10 mars 2018 at 14 h 16 min)

    Bonjour,
    Merci pour ce petit tuto.
    J’aimerai en savoir un peu plus, notamment sur la suite de la procédure, la façon dont on utilisa FA dans notre site une fois ces instructions suivies.
    Merci d’avance,
    Julien

    • Bonjour Julien, rien de plus simple!
      Pour utiliser une icône il vous suffit de vous référer aux instructions du site.

      i class= »fab fa-adn »

      Ici, la class fab appelle le style CSS général de l’icône et fa-adn le style CSS directement lié à votre icône.

      Vous trouverez la liste d’icônes ainsi que le code personnalisé d’une icône en cliquant dessus (CF ci-dessus).

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.