wake-up-neo.net

Wie verwende ich font-awesome Icons aus Knotenmodulen?

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

Wenn ich es von Knotenmodulen verwenden muss, wie sollte ich es in HTML-Datei verwenden?

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

cssnode.jslessnpmfont-awesome
84
Govan

Als npm install font-awesome --save-dev installieren

In Ihrer Entwicklungsdatei können Sie entweder die gesamte Schrift mit @import "node_modules/font-awesome/less/font-awesome.less" weniger gut importieren oder in diese Datei schauen und nur die benötigten Komponenten importieren. Ich denke, das ist das Minimum für grundlegende Icons:

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

Als Hinweis werden Sie immer noch nicht so viele Bytes speichern, indem Sie dies tun. So oder so, Sie werden am Ende 2-3-3 Zeilen nicht minimierten CSS enthalten.

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

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

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

mein-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;
}
46
Andreas Frische

Sie müssen die Dateien als Teil Ihres Erstellungsprozesses kopieren. Sie können beispielsweise ein npm postinstall-Skript 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 Pakete mit fantastischen Fonts. Zum Beispiel hat webpack font-awesome-webpack , wodurch Sie einfach require('font-awesome-webpack') können.

10
Wilfred Hughes

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

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

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

Oder wie auch immer Ihr Pfad zu Ihrem node_modules ist.

Edit (2017-06-26) - Haftungsausschluss: Zum Zeitpunkt dieser ursprünglichen Antwort waren gute Werkzeuge nicht so verbreitet. Bei aktuellen Build-Tools wie Webpack oder Browserify macht es wahrscheinlich keinen Sinn, diese Antwort zu verwenden. Ich kann es löschen, aber ich denke, es ist wichtig, die verschiedenen Optionen hervorzuheben, die man hat und die möglichen Dos and Dos.

3
Con Antonakos

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

npm install font-awesome --save-dev

danach lege ich einen statischen Ordner für die CSS und Schriftarten fest:

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!

2
alvinsandwich

Mit expressjs öffentlich:

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

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

2
Kimprosh

Verwendung von Webpack und Scss:

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

npm install @fortawesome/fontawesome-free

Kopieren Sie anschließend mit dem copy-webpack-plugin den Ordner webfonts aus node_modules in Ihren dist -Ordner während Ihres Webpack-Erstellungsprozesses. ( 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 webfonts-Ordner aus node_modules in den dist-Ordner.

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

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

Geben Sie schließlich in Ihrer Datei main.scss an, wo der Ordner webfonts in den Ordner kopiert wurde, und importieren Sie die gewünschten SCSS-Dateien aus node_modules.

$fa-font-path: "/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
@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";
1
pppglowacki

Wenn Sie npm verwenden, können Sie Gulp.js, ein Build-Tool, verwenden, um Ihre Font Awesome-Pakete aus SCSS oder LESS zu erstellen. In diesem Beispiel wird der Code von 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 in Ihrem öffentlichen Ordner eine main.scss-Datei, 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.

0
Ryan

Diese Frage hatte ein ähnliches Problem und ich dachte, ich würde eine andere Lösung teilen:

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

Führen Sie zuerst die Schritte in this guide 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:

fontIcon.html
0
jrook