Cara menggunakan ikon font-mengagumkan dari modul-node

Saya telah menginstal 4.0.3 ikon yang mengagumkan menggunakan font npm install.

Jika saya perlu menggunakannya dari node-modules, bagaimana saya harus menggunakannya dalam file html?

Jika saya perlu mengedit file yang lebih sedikit, apakah saya perlu mengeditnya di modul-node?

Pasang sebagai npm install font-awesome --save-dev

Dalam file development less, Anda dapat mengimpor seluruh font mengagumkan dengan lebih sedikit penggunaan @import "node_modules/font-awesome/less/font-awesome.less", atau melihat file tersebut dan mengimpor hanya komponen yang Anda butuhkan. Saya pikir ini adalah minimum untuk ikon dasar:

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

Sebagai catatan, Anda masih tidak akan menghemat banyak byte dengan melakukan ini. Apa pun itu, Anda akan memasukkan antara 2-3 ribu baris CSS tanpa batas.

Anda juga harus menyajikan font itu sendiri dari folder yang disebut /fonts/di direktori publik Anda. Anda bisa menyalinnya di sana dengan tugas gulp sederhana, misalnya:

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

Anda harus mengatur jalur font yang tepat. misalnya

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

Di file style.css saya

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

Anda perlu menyalin file sebagai bagian dari proses build Anda. Misalnya, Anda dapat menggunakan npm postinstallskrip untuk menyalin file ke direktori yang benar:

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

Untuk beberapa alat build, ada paket font-awesome yang sudah ada sebelumnya. Misalnya, webpack memiliki font-awesome-webpack yang memudahkan Anda require('font-awesome-webpack').

Menggunakan webpack dan scss:

Instal font-awesome menggunakan npm (menggunakan instruksi pengaturan di https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Berikutnya, menggunakan copy-Webpack-plugin , menyalin webfonts folder dari node_modules ke Anda dist folder selama Webpack proses membangun. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

Di webpack.config.js , konfigurasikan copy-webpack-plugin . CATATAN: Folder default webpack 4 dist adalah "dist", jadi kami menyalin folder webfonts dari node_modules ke folder dist.

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

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

Terakhir, di file main.scss Anda , beri tahu fontawesome di mana folder webfonts telah disalin dan impor file SCSS yang Anda inginkan dari 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` 

dan terapkan yang berikut ini font-familyke wilayah yang diinginkan dalam dokumen html Anda di mana Anda ingin menggunakan ikon fontawesome.

Contoh :

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

Dengan expressjs, publikasikan:

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

Dan Anda bisa melihatnya di: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Anda dapat menambahkannya di antara <head></head>tag Anda seperti:

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

Atau apa pun jalan Anda menuju Anda node_modules.

Sunting (2017-06-26) - Disclaimer: ADA JAWABAN YANG LEBIH BAIK. JANGAN GUNAKAN METODE INI. Pada saat jawaban awal ini, alat yang bagus tidak lazim. Dengan alat build saat ini seperti webpack atau browserify, mungkin tidak masuk akal untuk menggunakan jawaban ini. Saya dapat menghapusnya, tetapi menurut saya penting untuk menyoroti berbagai opsi yang dimiliki dan kemungkinan dos dan tidak boleh dilakukan.

Karena saya sedang mempelajari node js, saya juga mengalami masalah ini. Yang saya lakukan adalah, pertama-tama, instal font-awesome menggunakan npm

npm install font-awesome --save-dev

setelah itu, saya menetapkan folder statis untuk css dan font:

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

dan dalam html:

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

dan itu bekerja dengan baik!

Jika Anda menggunakan npm, Anda dapat menggunakan Gulp.js alat build untuk membuat paket Font Awesome dari SCSS atau LESS. Contoh ini akan mengkompilasi kode dari SCSS.

1. Instal Gulp.js v4 secara lokal dan CLI V2 secara global.

2. Instal plugin bernama gulp -sass menggunakan npm.

3. Buat file main.scss di folder publik Anda dan gunakan kode ini:

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

4. Buat gulpfile.js di direktori aplikasi Anda dan salin ini.

   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. Jalankan 'gulp build' di baris perintah Anda dan saksikan keajaibannya.

Saya menemukan pertanyaan ini memiliki masalah yang sama dan berpikir saya akan membagikan solusi lain:

Jika Anda membuat aplikasi Javascript, ikon font mengagumkan juga dapat direferensikan langsung melalui Javascript:

Pertama, lakukan langkah-langkah dalam panduan ini :

npm install @fortawesome/fontawesome-svg-core

Kemudian di dalam javascript Anda:

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

Setelah langkah-langkah di atas, Anda dapat memasukkan ikon di dalam node HTML dengan:

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

Anda juga dapat mengakses string HTML yang mewakili ikon dengan:

fontIcon.html