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


111

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?


¿Descubrió alguna vez la forma "correcta" de hacer esto? Actualmente solo estoy usando una tarea gulp para copiar las cosas de node_modules en mi directorio público.
sjmeverett

Lo usé como componente de bower más tarde ...
Govan

Respuestas:


106

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

9
Es necesario enfatizar más que las fuentes también debían ser servidas en una carpeta de fuentes ... Probablemente pasé una hora tratando de resolver esta pequeña cosa simple.
Alex J

3
También puede adaptar la ruta estática de la fuente configurando la variable fa-font-pathen la ubicación deseada.
zusatzstoff

En el ejemplo anterior, debe seguir sus menos importaciones con la siguiente anulación para que los archivos de fuentes impresionantes copiados por gulp se encuentren después de la implementación:@fa-font-path: "/public/fonts";
CAK2

56

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

3
Lo mismo para el descaro. Path ../assets/font-awesome/fontsfunciona para mí. Gracias.
Andrey

16

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

12

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


11

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

1
funciona bien para mí, solo tuve que ajustar la ruta de @import "../node_modules/[...]"a@import "@/../node_modules/[...]"
mecógrafo

Puede agregar un alias a webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}y luego@import "node_modules/[...]
Steven Almeroth

8

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


FontAwesome recomienda que su paquete npm se instale como devDependency. Para que esta solución funcione (en producción), ¿debería instalarse el paquete como una dependencia regular?
John J. Camilleri

1
Para responder a mi propia pregunta: sí, debe instalarse con --savey no--save-dev
John J. Camilleri

5

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.


16
No creo que nadie quiera incluir el directorio node_modules en una compilación y hacer referencia a él directamente.
Fabian Leutgeb

5
Entiendo, pero sigue siendo una opción. No hay una única respuesta para una solución. :) Si tiene un sistema de agrupación, puede que le @import '../node_modules/...'gusten otras respuestas indicadas.
Con Antonakos

1
en comparación con otras respuestas, creo que esta es la mejor. todavía está haciendo referencia a la ruta relativa a través de node_modules en las otras respuestas. si la ubicación del archivo css dentro font-awesomecambiara, esto necesitaría ajustes o mantenimiento tanto como las otras respuestas. La diferencia es que esta respuesta no necesita transpilación ni tareas. simplemente coloca la importación exactamente donde debería esperarse; en una <link>etiqueta.
norteamericano

3
Un simple forder npm tendrá un mínimo de 10 + MB, ningún usuario querrá agregar ese peso a un proyecto por ningún motivo. El objetivo de npm es ayudar mientras se está en desarrollo y minimizar / reducir el tamaño de producción una vez construido. No crea que esta sea una buena opción incluso cuando funciona. ; )
T04435

Agregué el siguiente descargo de responsabilidad: 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.
Con Antonakos

3

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!


2

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.


0

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.