Comment utiliser les icônes font-awesome des modules de nœuds

J'ai installé des icônes font-awesome 4.0.3 en utilisant npm install.

Si je dois l'utiliser à partir de modules de nœuds, comment dois-je l'utiliser dans un fichier html?

Si j'ai besoin de modifier le moins de fichiers, dois-je le modifier dans les modules de nœuds?

Installer en tant que npm install font-awesome --save-dev

Dans votre fichier de développement moins, vous pouvez soit importer la police entière avec moins d'utilisation @import "node_modules/font-awesome/less/font-awesome.less", soit regarder dans ce fichier et importer uniquement les composants dont vous avez besoin. Je pense que c'est le minimum pour les icônes 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 guise de note, vous n'allez toujours pas économiser autant d'octets en faisant cela. Dans tous les cas, vous allez finir par inclure entre 2 et 3 000 lignes de CSS non réduites.

Vous devrez également servir les polices elles-mêmes à partir d'un dossier appelé /fonts/dans votre répertoire public. Vous pouvez simplement les copier là-bas avec une simple tâche de 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;
}

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 devrez copier les fichiers dans le cadre de votre processus de construction. Par exemple, vous pouvez utiliser un npm postinstallscript 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 font-awesome préexistants. Par exemple, webpack a font-awesome-webpack qui vous permet de faire simple require('font-awesome-webpack').

Utilisation de webpack et scss:

Installez font-awesome en utilisant npm (en utilisant les instructions de configuration sur https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Ensuite, en utilisant la copie webpack-plugin , copiez le WebFonts dossier de node_modules à votre dist dossier lors de votre processus de construction de webpack. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

Dans webpack.config.js , configurez copy-webpack-plugin . REMARQUE: Le dossier dist de webpack 4 par défaut est "dist", nous copions donc le dossier webfonts de node_modules vers le dossier dist.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            { from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
        ])
    ]
}

Enfin, dans votre fichier main.scss , indiquez à fontawesome où le dossier webfonts a été copié et importez les fichiers SCSS souhaités à partir de node_modules .

$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/v4-shims"; // if you also want to use `fa v4`  like: `fa fa-address-book-o` 

et appliquez ce qui suit font-familyà une ou plusieurs régions souhaitées dans votre document html où vous souhaitez utiliser les icônes fontawesome.

Exemple :

 body {
      font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
      // font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
    }

Avec expressjs, publiez-le:

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

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

Vous pouvez l'ajouter entre votre <head></head>tag comme ceci:

<head>
  <link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>

Ou quel que soit votre chemin vers votre node_modules .

Edit (2017-06-26) - Clause de non-responsabilité: IL Y A DE MEILLEURES RÉPONSES. VEUILLEZ NE PAS UTILISER CETTE MÉTHODE. 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, il n'a probablement pas de 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 possibles et ne pas faire.

Puisque j'apprends actuellement le nœud js, j'ai également rencontré ce problème. Tout ce que j'ai fait a été, tout d'abord, d'installer le font-awesome en utilisant npm

npm install font-awesome --save-dev

après cela, j'ai défini un dossier statique pour le css et les polices:

app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));

et en html:

<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">

et ça marche bien!

Si vous utilisez npm, vous pouvez utiliser Gulp.js, un outil de construction pour créer vos packages Font Awesome à partir de SCSS ou de LESS. Cet exemple compilera le code de SCSS.

1. Installez Gulp.js v4 localement et CLI V2 globalement.

2. Installez un plugin appelé gulp-sass en utilisant npm.

3. Créez un fichier main.scss dans votre dossier public et utilisez ce code:

   $fa-font-path: "../webfonts";
   @import "fontawesome/fontawesome";
   @import "fontawesome/brands";
   @import "fontawesome/regular";
   @import "fontawesome/solid";
   @import "fontawesome/v4-shims";

4. Créez un gulpfile.js dans le répertoire de votre application et copiez-le.

   const { src, dest, series, parallel } = require('gulp');
   const sass = require('gulp-sass');
   const fs = require('fs');
   
   function copyFontAwesomeSCSS() {
      return src('node_modules/@fortawesome/fontawesome-free/scss/*.scss')
        .pipe(dest('public/scss/fontawesome'));
   }
   
   function copyFontAwesomeFonts() {
      return src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(dest('public/dist/webfonts'));
    }
   
    function compileSCSS() { 
      return src('./public/scss/theme.scss')
        .pipe(sass()).pipe(dest('public/css'));
    }
   
    // Series completes tasks sequentially and parallel completes them asynchronously
    exports.build = parallel(
      copyFontAwesomeFonts,
      series(copyFontAwesomeSCSS, compileSCSS)
    );

5. Exécutez «gulp build» dans votre ligne de commande et observez la magie.

Je suis tombé sur cette question ayant un problème similaire et j'ai pensé partager une autre solution:

Si vous créez une application Javascript, les icônes de polices géniales peuvent également être référencées directement via Javascript:

Commencez par suivre les étapes de ce guide :

npm install @fortawesome/fontawesome-svg-core

Puis dans votre javascript:

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })

Après les étapes ci-dessus, vous pouvez insérer l'icône dans un nœud HTML avec:

htmlNode.appendChild(fontIcon.node[0]);

Vous pouvez également accéder à la chaîne HTML représentant l'icône avec:

fontIcon.html