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


111

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?


Avez-vous déjà trouvé la manière «correcte» de procéder? J'utilise actuellement juste une tâche gulp pour copier le contenu de node_modules dans mon répertoire public.
sjmeverett

Je l'ai utilisé comme composant de bower plus tard ...
Govan

Réponses:


106

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'))
})

9
Il faut insister davantage sur le fait que les polices devaient également être servies dans un dossier de polices ... J'ai probablement passé une heure à essayer de comprendre cette petite chose simple.
Alex J

3
Vous pouvez également adapter le chemin de la statique de la police en définissant la variable fa-font-pathà l'emplacement souhaité.
zusatzstoff

Dans l'exemple ci-dessus, vous devez suivre vos importations moins avec le remplacement suivant afin que les fichiers de polices font-awesome copiés par gulp soient trouvés après le déploiement:@fa-font-path: "/public/fonts";
CAK2

56

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;
}

3
La même chose pour sass. Path ../assets/font-awesome/fontsfonctionne pour moi. Merci.
Andrey

16

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');

12

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').


11

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)
    }

1
fonctionne bien pour moi, je devais juste ajuster le chemin de @import "../node_modules/[...]"à@import "@/../node_modules/[...]"
mecograph

Vous pouvez ajouter un alias à webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}puis@import "node_modules/[...]
Steven Almeroth

8

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


FontAwesome recommande que leur package npm soit installé en tant que fichier devDependency. Pour que cette solution fonctionne (en production), le package doit-il être installé en tant que dépendance régulière?
John J.Camilleri

1
Pour répondre à ma propre question: oui, il doit être installé avec --saveet non--save-dev
John J. Camilleri

5

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.


16
Je ne pense pas que quiconque voudrait inclure le répertoire node_modules dans une construction et le référencer directement.
Fabian Leutgeb

5
Je comprends, mais c'est toujours une option. Il n'y a pas une seule réponse pour une solution. :) Si vous avez un système de regroupement, vous pouvez @import '../node_modules/...'aimer les autres réponses indiquées.
Con Antonakos

1
en comparaison avec d'autres réponses, je pense que c'est mieux. vous faites toujours référence au chemin relatif via node_modules dans les autres réponses. si l'emplacement du fichier css à l'intérieur font-awesomedevait changer, cela nécessiterait des ajustements ou une maintenance autant que les autres réponses. La différence est que cette réponse n'a besoin d'aucune transpilation ou tâche. il place simplement l'importation exactement là où elle devrait être attendue; dans une <link>balise.
northamerican

3
Un simple forder npm aura au minimum 10 + Mo, aucun utilisateur ne voudra ajouter ce poids à un projet pour quelque raison que ce soit. Le but de npm est d'aider pendant le développement et de minimiser / réduire la taille de la production une fois la construction terminée. Ne pensez pas que ce soit une bonne option, même si cela fonctionne. ; )
T04435

J'ai ajouté l'avertissement suivant: 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.
Con Antonakos

3

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!


2

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.


0

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.