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


111

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ó?


Você já descobriu a maneira "correta" de fazer isso? No momento, estou apenas usando uma tarefa gulp para copiar as coisas de node_modules em meu diretório público.
sjmeverett

Usei-o como componente do caramanchão mais tarde ...
Govan

Respostas:


106

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

9
É preciso ressaltar mais que as fontes também precisavam ser servidas em uma pasta de fontes ... Provavelmente passei uma hora tentando descobrir essa coisinha simples.
Alex J

3
Você também pode adaptar o caminho da estática da fonte definindo a variável fa-font-pathpara o local desejado.
zusatzstoff 01 de

No exemplo acima, você precisa seguir as suas menos importações com a seguinte substituição para que os arquivos de fonte incríveis copiados pelo gulp sejam encontrados após a implantação:@fa-font-path: "/public/fonts";
CAK2

56

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

3
O mesmo para atrevimento. O caminho ../assets/font-awesome/fontsfunciona para mim. Obrigado.
Andrey

16

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

12

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


11

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

1
funciona bem para mim, eu só tive que ajustar o caminho de @import "../node_modules/[...]"para@import "@/../node_modules/[...]"
mecógrafo

Você pode adicionar um alias a webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}e então@import "node_modules/[...]
Steven Almeroth

8

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


FontAwesome recomenda que seu pacote npm seja instalado como um devDependency. Para que esta solução funcione (em produção), o pacote deve ser instalado como uma dependência regular?
John J. Camilleri

1
Para responder à minha própria pergunta: sim, ele precisa ser instalado com --savee não--save-dev
John J. Camilleri

5

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.


16
Eu não acho que alguém iria querer incluir o diretório node_modules em um build e referenciá-lo diretamente.
Fabian Leutgeb

5
Eu entendo, mas ainda é uma opção. Não existe uma única resposta para uma solução. :) Se você tem um sistema de empacotamento, então você pode @import '../node_modules/...'gostar de outras respostas indicadas.
Con Antonakos

1
em comparação com outras respostas, acho que esta é a melhor. você ainda está fazendo referência ao caminho relativo por meio de node_modules nas outras respostas. se a localização do arquivo css dentro font-awesomefosse alterada, isso precisaria de ajustes ou manutenção tanto quanto as outras respostas. a diferença é que essa resposta não precisa de transpilação ou tarefas. ele apenas coloca a importação exatamente onde deveria ser esperada; em uma <link>tag.
norte

3
Um forder npm simples terá no mínimo 10 + MB, nenhum usuário vai querer adicionar esse peso a um projeto por qualquer motivo. O objetivo do npm é ajudar durante o desenvolvimento e minimizar / reduzir o tamanho da produção após a construção. Não pense que esta é uma boa opção, mesmo quando funciona. ; )
T04435

Eu adicionei a seguinte isenção de responsabilidade: na época desta resposta original, as 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 se tem e os possíveis prós e contras.
Con Antonakos

3

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!


2

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.


0

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.