web-dev-qa-db-fra.com

Comment utiliser les icônes font-awesome de node-modules

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

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

Si j'ai besoin d'éditer moins de fichier, dois-je l'éditer dans les modules de nœud?

cssnode.jslessnpmfont-awesome
84
Govan

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 moins impressionnante en utilisant @import "node_modules/font-awesome/less/font-awesome.less", soit consulter 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 note, vous n'allez toujours pas sauvegarder autant d'octets en faisant cela. Dans les deux cas, vous allez finir par inclure entre 2 et 3 000 lignes de CSS non modifiées.

Vous aurez également besoin de 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 tâche simple gulp, par exemple: 

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

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;
}
46
Andreas Frische

Vous devrez copier les fichiers dans le cadre de votre processus de construction. 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 font-awesome préexistants. Par exemple, webpack a font-awesome-webpack qui vous permet d'utiliser require('font-awesome-webpack') de manière simple.

10
Wilfred Hughes

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

Vous pouvez l'ajouter entre votre balise <head></head> comme suit:

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

Ou quel que soit votre chemin d'accès à votre node_modules.

Edit (2017-06-26) - Disclaimer: Au moment de cette réponse originale, les bons outils étaient moins répandus. Avec les outils de construction actuels tels que webpack ou browserify, il n’a probablement aucun sens à utiliser cette réponse. Je peux le supprimer, mais j'estime qu'il est important de souligner les différentes options possibles et les éventuelles choses à faire.

3
Con Antonakos

Comme je suis en train d'apprendre le noeud js, j'ai aussi rencontré ce problème. Tout ce que j’ai fait, c’est d’abord d’installer le font-awesome à l’aide de npm

npm install font-awesome --save-dev

après cela, j'ai défini un dossier statique pour les fichiers 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
alvinsandwich

Avec expressjs, le public 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

2
Kimprosh

Utilisation de webpack et scss:

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

npm install @fortawesome/fontawesome-free

Ensuite, en utilisant copy-webpack-plugin, copiez le dossier webfonts de node_modules dans votre dossier dist lors de la création de votre 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 Webpack 4 dist par défaut est "dist". Nous allons donc copier le dossier webfonts de node_modules dans 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 de node_modules.

$fa-font-path: "/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
@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";
1
pppglowacki

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

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

  2. Installez un plugin appelé gulp-sass using 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 fichier gulpfile.js dans votre répertoire app 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
Ryan

Je suis tombé sur cette question avec un problème similaire et je pensais partager une autre solution:

Si vous créez une application Javascript, vous pouvez également référencer directement des icônes de police de caractères géniales via Javascript:

Tout d’abord, suivez 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 à l'intérieur d'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
0
jrook