Comment utiliser des icons de font-awesome à partir de node-modules

Installer comme npm install font-awesome --save-dev

Dans votre fichier de développement moins, vous pouvez soit importer la police entière moins impressionnante en utilisant @import "node_modules/font-awesome/less/font-awesome.less" , soit regarder ce fichier et importer uniquement les composants dont vous avez besoin. Je pense que c’est le minimum pour les icons de base:

 /* adjust path as needed */ @fa_path: "../node_modules/font-awesome/less"; @import "@{fa_path}/variables.less"; @import "@{fa_path}/mixins.less"; @import "@{fa_path}/path.less"; @import "@{fa_path}/core.less"; @import "@{fa_path}/icons.less"; 

En tant que note, vous n’allez toujours pas économiser autant d’octets en faisant cela. De toute façon, vous allez vous retrouver avec entre 2 et 3 lignes de CSS non annulées.

Vous devrez également servir les fonts elles-mêmes à partir d’un dossier appelé /fonts/ dans votre répertoire public. Vous pouvez simplement les copier avec une simple tâche Gulp, par exemple:

 gulp.task('fonts', function() { return gulp.src('node_modules/font-awesome/fonts/*') .pipe(gulp.dest('public/fonts')) }) 

Vous devez définir le chemin de police approprié. par exemple

mon-style.scss

 $fa-font-path:"../node_modules/font-awesome/fonts"; @import "../node_modules/font-awesome/scss/font-awesome"; .icon-user { @extend .fa; @extend .fa-user; } 

Vous devrez copier les fichiers dans le cadre de votre processus de génération. Par exemple, vous pouvez utiliser un script npm postinstall pour copier les fichiers dans le bon répertoire:

 "postinstall": "cp -R node_modules/font-awesome/fonts ./public/" 

Pour certains outils de construction, il existe des packages préexistants de font-awesome. Par exemple, webpack a font-awesome-webpack qui vous permet de créer des requêtes simples require('font-awesome-webpack') .

Dans mon fichier style.css

 /* You can add global styles to this file, and also import other style files */ @import url('../node_modules/font-awesome/css/font-awesome.min.css'); 

Vous pouvez l’append entre votre tag comme ceci:

Ou quel que soit votre chemin vers votre node_modules .

Edit (2017-06-26) – Disclaimer: Au moment de cette réponse originale, les bons outils n’étaient pas aussi répandus. Avec les outils de construction actuels tels que webpack ou browserify, cela n’a probablement aucun sens d’utiliser cette réponse. Je peux le supprimer, mais je pense qu’il est important de mettre en évidence les différentes options dont on dispose et les possibilités et les inconvénients possibles.

Avec expressjs, publiez-le:

 app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/')); 

Et vous pouvez le voir à: yourdomain.com/stylesheets/fontawesome/css/all.min.css