Come usare le icone fantastiche dei caratteri dai moduli dei nodi


111

Ho installato le fantastiche icone 4.0.3 usando npm install.

Se devo usarlo da node-modules come dovrei usarlo nel file html?

Se devo modificare il file less, devo modificarlo in node-modules?


Hai mai trovato il modo "corretto" per farlo? Attualmente sto solo usando un'attività gulp per copiare il materiale da node_modules nella mia directory pubblica.
sjmeverett

L'ho usato come componente di pergola più tardi ...
Govan

Risposte:


106

Installa come npm install font-awesome --save-dev

Nel tuo file di sviluppo meno, puoi importare l'intero font in modo fantastico usando meno @import "node_modules/font-awesome/less/font-awesome.less", oppure guardare in quel file e importare solo i componenti di cui hai bisogno. Penso che questo sia il minimo per le icone di 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";

Come nota, non salverai ancora così tanti byte in questo modo. In ogni caso, finirai per includere tra 2-3k righe di CSS non minimizzato.

Dovrai anche fornire i caratteri stessi da una cartella chiamata /fonts/nella tua directory pubblica. Potresti semplicemente copiarli lì con una semplice attività gulp, ad esempio:

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

9
Va sottolineato di più che i caratteri dovevano essere serviti anche in una cartella dei caratteri ... Probabilmente ho passato un'ora a cercare di capire questa piccola cosa semplice.
Alex J

3
È inoltre possibile adattare il percorso statico del carattere impostando la variabile fa-font-pathnella posizione desiderata.
zusatzstoff

Nell'esempio precedente, è necessario seguire le importazioni di meno con la seguente sovrascrittura in modo che i file dei caratteri fantastici copiati da gulp vengano trovati dopo la distribuzione:@fa-font-path: "/public/fonts";
CAK2

56

Devi impostare il percorso del carattere corretto. per esempio

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 stesso per sass. Path ../assets/font-awesome/fontsfunziona per me. Grazie.
Andrey

16

Nel mio file 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

Dovrai copiare i file come parte del processo di compilazione. Ad esempio, puoi utilizzare uno npm postinstallscript per copiare i file nella directory corretta:

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

Per alcuni strumenti di compilazione, ci sono pacchetti preesistenti fantastici per i font. Ad esempio, webpack ha font-awesome-webpack che ti semplifica require('font-awesome-webpack').


11

Utilizzando webpack e scss:

Installa font-awesome usando npm (usando le istruzioni di installazione su https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Successivamente, utilizzando il copia-webpack-plugin , copiare i webfonts cartella dal node_modules al tuo dist cartella durante il processo di compilazione webpack. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

In webpack.config.js , configura copy-webpack-plugin . NOTA: La cartella dist predefinita di webpack 4 è "dist", quindi stiamo copiando la cartella webfonts da node_modules alla cartella dist.

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

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

Infine, nel main.scss di file, dire fontawesome dove i webfonts cartella è stato copiato e importare i file SCSS desiderati da 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 applica quanto segue font-familya una o più regioni desiderate nel tuo documento html in cui desideri utilizzare le icone fontawesome.

Esempio :

 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
per me funziona bene, dovevo solo aggiustare il percorso da @import "../node_modules/[...]"a@import "@/../node_modules/[...]"
mecografo

Puoi aggiungere un alias a webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}e poi@import "node_modules/[...]
Steven Almeroth

8

Con expressjs, pubblicalo:

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

E puoi vederlo su: yourdomain.com/stylesheets/fontawesome/css/all.min.css


FontAwesome consiglia di installare il proprio pacchetto npm come file devDependency. Affinché questa soluzione funzioni (in produzione) il pacchetto deve essere installato come una normale dipendenza?
John J. Camilleri

1
Per rispondere alla mia domanda: sì, deve essere installato con --savee non--save-dev
John J. Camilleri

5

Puoi aggiungerlo tra i tuoi <head></head>tag in questo modo:

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

O qualunque sia il tuo percorso verso il tuo node_modules.

Modifica (26/06/2017) - Disclaimer: CI SONO RISPOSTE MIGLIORI. SI PREGA DI NON UTILIZZARE QUESTO METODO. Al momento di questa risposta originale, i buoni strumenti non erano così diffusi. Con gli attuali strumenti di compilazione come webpack o browserify, probabilmente non ha senso usare questa risposta. Posso eliminarlo, ma penso che sia importante evidenziare le varie opzioni che si hanno e le possibili cose da fare e da non fare.


16
Non penso che nessuno vorrebbe includere la directory node_modules in una build e farvi riferimento direttamente.
Fabian Leutgeb

5
Capisco, ma è ancora un'opzione. Non esiste un'unica risposta per una soluzione. :) Se disponi di un sistema di raggruppamento, puoi @import '../node_modules/...'apprezzare le altre risposte indicate.
Con Antonakos

1
rispetto ad altre risposte, penso che sia la migliore. stai ancora facendo riferimento al percorso relativo tramite node_modules nelle altre risposte. se la posizione del file css all'interno font-awesomedovesse cambiare, ciò avrebbe bisogno di modifiche o manutenzione tanto quanto le altre risposte. la differenza è che questa risposta non ha bisogno di transpilation o compiti. posiziona semplicemente l'importazione esattamente dove dovrebbe essere previsto; in un <link>tag.
nordamericano

3
Un semplice forder npm avrà come minimo 10 + MB, nessun utente vorrà aggiungere quel peso a un progetto per nessun motivo. Il punto centrale di npm è aiutare durante lo sviluppo e minimizzare / ridurre le dimensioni di produzione una volta costruito. Non pensare che questa sia una buona opzione anche quando funziona. ; )
T04435

Ho aggiunto la seguente dichiarazione di non responsabilità: al momento di questa risposta originale, i buoni strumenti non erano così diffusi. Con gli attuali strumenti di compilazione come webpack o browserify, probabilmente non ha senso usare questa risposta. Posso eliminarlo, ma penso che sia importante evidenziare le varie opzioni che si hanno e le possibili cose da fare e da non fare.
Con Antonakos

3

Poiché attualmente sto imparando node js, ho riscontrato anche questo problema. Tutto quello che ho fatto è stato, prima di tutto, installare il font-awesome usando npm

npm install font-awesome --save-dev

dopodiché, ho impostato una cartella statica per css e caratteri:

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

e in html:

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

e funziona bene!


2

Se stai usando npm puoi usare Gulp.js uno strumento di compilazione per creare i tuoi pacchetti Font Awesome da SCSS o LESS. Questo esempio compilerà il codice da SCSS.

  1. Installa Gulp.js v4 localmente e CLI V2 a livello globale.

  2. Installa un plugin chiamato gulp-sass usando npm.

  3. Crea un file main.scss nella tua cartella pubblica e usa questo codice:

    $fa-font-path: "../webfonts";
    @import "fontawesome/fontawesome";
    @import "fontawesome/brands";
    @import "fontawesome/regular";
    @import "fontawesome/solid";
    @import "fontawesome/v4-shims";
  4. Crea un gulpfile.js nella directory dell'app e copialo.

    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. Esegui "gulp build" nella riga di comando e osserva la magia.


0

Mi sono imbattuto in questa domanda avendo un problema simile e ho pensato di condividere un'altra soluzione:

Se stai creando un'applicazione Javascript, puoi anche fare riferimento alle fantastiche icone dei caratteri direttamente tramite Javascript:

Innanzitutto, esegui i passaggi in questa guida :

npm install @fortawesome/fontawesome-svg-core

Quindi all'interno del tuo 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' })

Dopo i passaggi precedenti, puoi inserire l'icona all'interno di un nodo HTML con:

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

Puoi anche accedere alla stringa HTML che rappresenta l'icona con:

fontIcon.html
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.