Cómo usar iconos de fuentes impresionantes de módulos de nodo

He instalado iconos de font-awesome 4.0.3 usando npm install.

Si necesito usarlo desde los módulos de nodo, ¿cómo debo usarlo en el archivo html?

Si necesito editar el archivo menos, ¿necesito editarlo en módulos de nodo?

Instalar como npm install font-awesome --save-dev

En su archivo sin desarrollo, puede importar toda la fuente con menos uso @import "node_modules/font-awesome/less/font-awesome.less", o buscar en ese archivo e importar solo los componentes que necesita. Creo que este es el mínimo para iconos básicos:

/* 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";

Como nota, todavía no va a ahorrar tantos bytes haciendo esto. De cualquier manera, terminarás incluyendo entre 2 y 3 mil líneas de CSS sin reducir.

También deberá servir las fuentes en sí desde una carpeta llamada /fonts/en su directorio público. Puede copiarlos allí con una simple tarea de tragar, por ejemplo:

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

Tienes que establecer la ruta de fuente adecuada. p.ej

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

En mi archivo 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');

Deberá copiar los archivos como parte de su proceso de compilación. Por ejemplo, puede usar un npm postinstallscript para copiar los archivos al directorio correcto:

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

Para algunas herramientas de compilación, existen paquetes de fuentes impresionantes. Por ejemplo, webpack tiene font-awesome-webpack que te permite simplificar require('font-awesome-webpack').

Usando webpack y scss:

Instale font-awesome usando npm (usando las instrucciones de configuración en https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Luego, usando el copy-webpack-plugin , copie la carpeta webfonts de node_modules a su carpeta dist durante el proceso de compilación de su paquete web. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

En webpack.config.js , configure copy-webpack-plugin . NOTA: La carpeta dist predeterminada de webpack 4 es "dist", por lo que estamos copiando la carpeta webfonts de node_modules a la carpeta dist.

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

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

Por último, en su archivo main.scss , dígale a fontawesome dónde se ha copiado la carpeta webfonts e importe los archivos SCSS que desea desde 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` 

y aplicar lo siguiente font-family a la (s) región (es) deseada (s) en su documento html donde desea usar los iconos de fuente.

Ejemplo :

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

Con expressjs, publícalo:

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

Y puedes verlo en: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Podría agregarlo entre su <head></head>etiqueta así:

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

O cualquiera que sea tu camino hacia el tuyo node_modules.

Editar (2017-06-26) - Descargo de responsabilidad: HAY MEJORES RESPUESTAS. POR FAVOR NO USE ESTE MÉTODO. En el momento de esta respuesta original, las buenas herramientas no eran tan frecuentes. Con las herramientas de compilación actuales como webpack o browserify, probablemente no tenga sentido usar esta respuesta. Puedo eliminarlo, pero creo que es importante resaltar las diversas opciones que uno tiene y las posibles cosas que se deben y no se deben hacer.

Como actualmente estoy aprendiendo node js, también encontré este problema. Todo lo que hice fue, en primer lugar, instalar la fuente impresionante usando npm

npm install font-awesome --save-dev

después de eso, configuré una carpeta estática para el CSS y las fuentes:

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

y en html:

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

¡y funciona bien!

Si está usando npm, podría usar Gulp.js, una herramienta de compilación para crear sus paquetes Font Awesome desde SCSS o LESS. Este ejemplo compilará el código de SCSS.

1. Instale Gulp.js v4 localmente y CLI V2 globalmente.

2. Instale un complemento llamado gulp-sass usando npm.

3. Cree un archivo main.scss en su carpeta pública y use este código:

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

4. Cree un archivo gulpfile.js en el directorio de su aplicación y cópielo.

   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. Ejecute 'gulp build' en su línea de comandos y observe la magia.

Encontré esta pregunta con un problema similar y pensé en compartir otra solución:

Si está creando una aplicación de Javascript, también se puede hacer referencia a íconos de fuentes increíbles directamente a través de Javascript:

Primero, siga los pasos de esta guía :

npm install @fortawesome/fontawesome-svg-core

Luego, dentro de su 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' })

Después de los pasos anteriores, puede insertar el icono dentro de un nodo HTML con:

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

También puede acceder a la cadena HTML que representa el icono con:

fontIcon.html