Cara menggunakan ikon font-mengagumkan dari modul-node


111

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?


Apakah Anda pernah menemukan cara yang "benar" untuk melakukan ini? Saat ini saya hanya menggunakan tugas gulp untuk menyalin barang-barang dari node_modules ke direktori publik saya.
sjmeverett

Saya menggunakannya sebagai komponen bower nanti ...
Govan

Jawaban:


106

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

9
Perlu lebih ditekankan bahwa font juga perlu disajikan ke folder font ... Saya mungkin menghabiskan satu jam mencoba mencari tahu hal kecil yang sederhana ini.
Alex J

3
Anda juga dapat menyesuaikan jalur statika font dengan mengatur variabel fa-font-pathke lokasi yang Anda inginkan.
zusatzstoff

Dalam contoh di atas, Anda perlu mengikuti lebih sedikit impor Anda dengan penggantian berikut sehingga file font mengagumkan font yang disalin oleh gulp akan ditemukan setelah penerapan:@fa-font-path: "/public/fonts";
CAK2

56

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

3
Hal yang sama untuk sass. Jalan ../assets/font-awesome/fontsberhasil untuk saya. Terima kasih.
Andrey

16

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

12

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


11

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

1
berfungsi dengan baik untuk saya, saya hanya harus menyesuaikan jalur dari @import "../node_modules/[...]"ke@import "@/../node_modules/[...]"
mekograf

Anda dapat menambahkan alias ke webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}dan kemudian@import "node_modules/[...]
Steven Almeroth

8

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


FontAwesome merekomendasikan agar paket npm mereka diinstal sebagai file devDependency. Agar solusi ini berfungsi (dalam produksi) haruskah paket diinstal sebagai dependensi reguler?
John J. Camilleri

1
Untuk menjawab pertanyaan saya sendiri: ya, itu perlu dipasang dengan --savedan tidak--save-dev
John J.Camilleri

5

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.


16
Saya tidak berpikir ada orang yang ingin memasukkan direktori node_modules dalam membangun dan mereferensikannya secara langsung.
Fabian Leutgeb

5
Saya mengerti, tapi itu masih sebuah pilihan. Tidak ada jawaban tunggal untuk sebuah solusi. :) Jika Anda memiliki sistem bundling, maka Anda dapat @import '../node_modules/...'seperti jawaban lain yang ditunjukkan.
Con Antonakos

1
dibandingkan dengan jawaban lain, saya merasa ini yang terbaik. Anda masih mereferensikan jalur relatif melalui node_modules di jawaban lain. jika lokasi file css di dalamnya font-awesomeberubah, ini akan membutuhkan penyesuaian atau pemeliharaan sebanyak jawaban lainnya. perbedaannya adalah jawaban ini tidak memerlukan transpilasi atau tugas. itu hanya menempatkan impor tepat di tempat yang diharapkan; dalam sebuah <link>tag.
utara

3
Sebuah npm forder sederhana akan memiliki minimal 10 + MB, tidak ada pengguna yang ingin menambahkan bobot itu ke proyek untuk alasan apa pun. Inti dari npm adalah untuk membantu saat dalam Pengembangan dan meminimalkan / mengurangi ukuran Produksi setelah dibuat. Jangan berpikir ini adalah pilihan yang baik bahkan ketika berhasil. ; )
T04435

Saya menambahkan pelepasan tanggung jawab hukum berikut: Pada saat jawaban asli 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.
Con Antonakos

3

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!


2

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.


0

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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.