So verwenden Sie font-awesome Symbole aus Node-Modulen

Ich habe font-awesome 4.0.3 Symbole mit installiert npm install.

Wenn ich es von Node-Modulen verwenden muss, wie soll ich es in einer HTML-Datei verwenden?

Wenn ich die weniger Dateien bearbeiten muss, muss ich sie in Knotenmodulen bearbeiten?

Installieren als npm install font-awesome --save-dev

In Ihrer Datei ohne Entwicklung können Sie entweder die gesamte Schriftart mit weniger Aufwand importieren @import "node_modules/font-awesome/less/font-awesome.less"oder in diese Datei schauen und nur die Komponenten importieren, die Sie benötigen. Ich denke, dies ist das Minimum für grundlegende Symbole:

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

Auf diese Weise werden Sie immer noch nicht so viele Bytes speichern. In beiden Fällen werden Sie zwischen 2-3.000 Zeilen nicht minimierten CSS einfügen.

Sie müssen die Schriftarten auch selbst aus einem Ordner bereitstellen, der /fonts/in Ihrem öffentlichen Verzeichnis aufgerufen wird . Sie können sie dort einfach mit einer einfachen Schluckaufgabe kopieren, zum Beispiel:

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

Sie müssen den richtigen Schriftpfad festlegen. z.B

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

In meiner style.css-Datei

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

Sie müssen die Dateien im Rahmen Ihres Erstellungsprozesses kopieren. Sie können beispielsweise ein npm postinstallSkript verwenden, um die Dateien in das richtige Verzeichnis zu kopieren:

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

Für einige Build-Tools gibt es bereits vorhandene Font-Awesome-Pakete. Zum Beispiel hat Webpack Font-Awesome-Webpack, mit dem Sie einfach require('font-awesome-webpack').

Verwenden von Webpack und scss:

Installieren Sie font-awesome mit npm (mithilfe der Setup-Anweisungen unter https://fontawesome.com/how-to-use ).

npm install @fortawesome/fontawesome-free

Als nächstes wird die Verwendung von Copy-webpack-Plugin , kopieren Sie die Webfonts Ordner aus node_modules zu Ihrem dist - Ordner während Ihres webpack Build - Prozess. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

Konfigurieren Sie in webpack.config.js das copy-webpack-plugin . HINWEIS: Der Standardordner für webpack 4 dist ist "dist", daher kopieren wir den Ordner "webfonts" von "node_modules" in den Ordner "dist".

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

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

Schließlich in Ihrer main.scss fontawesome Datei, sagen , wo die Webfonts Ordner kopiert wurde , und die SCSS - Dateien importieren Sie wollen 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` 

und wenden Sie Folgendes font-familyauf einen oder mehrere gewünschte Bereiche in Ihrem HTML-Dokument an, in denen Sie die Fontawesome-Symbole verwenden möchten.

Beispiel :

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

Mit expressjs öffentlich es:

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

Und Sie können es sehen bei: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Sie können es <head></head>wie folgt zwischen Ihren Tags einfügen:

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

Oder was auch immer dein Weg zu dir node_modulesist.

Bearbeiten (26.06.2017) - Haftungsausschluss: ES GIBT BESSERE ANTWORTEN. BITTE VERWENDEN SIE DIESE METHODE NICHT. Zum Zeitpunkt dieser ursprünglichen Antwort waren gute Werkzeuge nicht so verbreitet. Mit aktuellen Build-Tools wie Webpack oder browserify ist es wahrscheinlich nicht sinnvoll, diese Antwort zu verwenden. Ich kann es löschen, aber ich denke, es ist wichtig, die verschiedenen Optionen und die möglichen Vor- und Nachteile hervorzuheben.

Da ich gerade Knoten js lerne, bin ich auch auf dieses Problem gestoßen. Alles, was ich getan habe, war, zuerst die Schriftart-awesome mit npm zu installieren

npm install font-awesome --save-dev

Danach habe ich einen statischen Ordner für CSS und Schriftarten festgelegt:

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

und in HTML:

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

und es funktioniert gut!

Wenn Sie npm verwenden, können Sie Gulp.js verwenden, ein Build-Tool, um Ihre Font Awesome-Pakete aus SCSS oder LESS zu erstellen. In diesem Beispiel wird der Code aus SCSS kompiliert.

1. Installieren Sie Gulp.js v4 lokal und CLI V2 global.

2. Installieren Sie ein Plugin namens gulp-sass mit npm.

3. Erstellen Sie eine main.scss-Datei in Ihrem öffentlichen Ordner und verwenden Sie diesen Code:

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

4. Erstellen Sie eine gulpfile.js in Ihrem App-Verzeichnis und kopieren Sie diese.

   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. Führen Sie "gulp build" in Ihrer Befehlszeile aus und beobachten Sie die Magie.

Ich stieß auf diese Frage mit einem ähnlichen Problem und dachte, ich würde eine andere Lösung teilen:

Wenn Sie eine Javascript-Anwendung erstellen, können auf Symbole für großartige Schriftarten auch direkt über Javascript verwiesen werden:

Führen Sie zunächst die Schritte in diesem Handbuch aus :

npm install @fortawesome/fontawesome-svg-core

Dann in Ihrem 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' })

Nach den obigen Schritten können Sie das Symbol in einen HTML-Knoten einfügen mit:

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

Sie können auch auf die HTML-Zeichenfolge zugreifen, die das Symbol darstellt, mit:

fontIcon.html