Como usar ícones incríveis de fontes de módulos de nó

Eu instalei ícones do tipo fonte 4.0.3 usando npm install.

Se eu precisar usá-lo a partir de módulos de nó, como devo usá-lo no arquivo html?

Se eu precisar editar o arquivo less, preciso editá-lo nos módulos do nó?

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

Em seu arquivo de desenvolvimento menos, você pode importar a fonte inteira com menos uso @import "node_modules/font-awesome/less/font-awesome.less", ou olhar nesse arquivo e importar apenas os componentes que você precisa. Acho que este é o mínimo para ícones 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 uma nota, você ainda não vai economizar tantos bytes fazendo isso. De qualquer forma, você vai acabar incluindo entre 2-3k linhas de CSS não minimizado.

Você também precisará servir as próprias fontes de uma pasta chamada /fonts/em seu diretório público. Você pode simplesmente copiá-los para lá com uma simples tarefa de gole, por exemplo:

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

Você deve definir o caminho da fonte adequado. por exemplo

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

No meu arquivo 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');

Você precisará copiar os arquivos como parte do processo de construção. Por exemplo, você pode usar um npm postinstallscript para copiar os arquivos para o diretório correto:

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

Para algumas ferramentas de construção, existem pacotes fantásticos de fontes preexistentes. Por exemplo, webpack tem font-awesome-webpack que deixa você simples require('font-awesome-webpack').

Usando webpack e scss:

Instale font-awesome usando npm (usando as instruções de configuração em https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Em seguida, usando o copy-Webpack-plugin , copie os WebFonts pasta da node_modules a sua dist pasta durante o processo de compilação Webpack. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

Em webpack.config.js , configure copy-webpack-plugin . NOTA: A pasta webpack 4 dist padrão é "dist", então estamos copiando a pasta webfonts de node_modules para a pasta dist.

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

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

Por último, em seu arquivo main.scss , diga ao fontawesome para onde a pasta webfonts foi copiada e importe os arquivos SCSS que deseja 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` 

e aplique o seguinte font-family à (s) região (ões) desejada (s) em seu documento html onde você deseja usar os ícones de fontes incríveis.

Exemplo :

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

Com expressjs, publique-o:

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

E você pode ver isso em: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Você pode adicioná-lo entre sua <head></head>tag assim:

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

Ou qualquer que seja o seu caminho para o seu node_modules.

Editar (26-06-2017) - Aviso: HÁ RESPOSTAS MELHORES. POR FAVOR, NÃO USE ESTE MÉTODO. Na época desta resposta original, boas ferramentas não eram tão predominantes. Com as ferramentas de construção atuais, como webpack ou browserify, provavelmente não faz sentido usar esta resposta. Posso excluí-lo, mas acho importante destacar as várias opções que temos e os possíveis prós e contras.

Como atualmente estou aprendendo node js, também encontrei esse problema. Tudo o que fiz foi, em primeiro lugar, instalar a fonte incrível usando npm

npm install font-awesome --save-dev

depois disso, defino uma pasta estática para o css e as fontes:

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

e em html:

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

e funciona bem!

Se você estiver usando o npm, poderá usar o Gulp.js, uma ferramenta de construção para construir seus pacotes Font Awesome a partir de SCSS ou LESS. Este exemplo irá compilar o código do SCSS.

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

2. Instale um plugin chamado gulp-sass usando npm.

3. Crie um arquivo main.scss em sua pasta pública e 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. Crie um gulpfile.js no diretório do seu aplicativo e copie-o.

   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. Execute 'gulp build' em sua linha de comando e observe a magia.

Encontrei esta questão com um problema semelhante e pensei em compartilhar outra solução:

Se você estiver criando um aplicativo Javascript, ícones incríveis de fontes também podem ser referenciados diretamente por meio de Javascript:

Primeiro, siga as etapas neste guia :

npm install @fortawesome/fontawesome-svg-core

Então, dentro do seu 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' })

Após as etapas acima, você pode inserir o ícone dentro de um nó HTML com:

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

Você também pode acessar a string HTML que representa o ícone com:

fontIcon.html