Intégrer fontawesome sur un site via sass

Pour intégrer fontawesome sur votre site internet, vous pouvez vous y prendre de différentes manières.

Appeler les bibliothèques d'icônes de fontawesome dans le header par des liens link href :

 < link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" >
 < link href="/your-path-to-fontawesome/css/brand.css" rel="stylesheet" >
 < link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" >

Ce n'est pas l'option que je trouve la plus élégante, d'autant que si l'on travaille avec sass, il y a une manière d'encapsuler fontawesome directement dans app.scss.

 Intégrer les bibliothèques d'icônes dans app.scss

 La méthode que je préfère est d'utiliser sass pour intégrer les packs d'icônes directement dans les css au moment du build des feuilles de styles. Cela permet d'une part de ne pas surcharger inutilement les déclarations dans la balise head et d'autre part de tout gérer dans le app.scss.

La méthode est simple.

Dans un premier temps, il faut télécharger le zip de fontawesome pour scss, il contient deux répertoires, un qui s'appelle scss sur lequel nous allons faire les déclarations voulues et l'autre webfonts contenant les polices proprement dites en svg.

 Déclarer les chemins des bibliothèques de polices.

Ensuite nous allons nous placer dans notre fichier de configuration app.scss, ou nous allons déclarer dans l'import les fichiers scss dont nous aurons besoin.

Enfin, dans le fichier variables.scss, nous allons déclarer la variable $fa-font-path avec la valeur du chemin du répertoire webfonts.

Ce qui se résume si l'on mets toutes ces déclarations dans le fichier app.scss à cela.

  @import "./fontawesome/scss/fontawesome";
 @import "./fontawesome/scss/solid";
 

 $fa-font-path: '../webfonts';

Il ne vous reste plus qu'à lancer un watch ou un build sur votre sass préféré.