Jak używać niesamowitych ikon czcionek z modułów węzłów

Zainstalowałem ikony font-awesome 4.0.3 przy użyciu npm install.

Jeśli muszę go używać z modułów węzłów, jak powinienem go używać w pliku html?

Jeśli muszę edytować mniejszy plik, czy muszę go edytować w modułach węzłów?

Zainstaluj jako npm install font-awesome --save-dev

W swoim pliku programowania mniej, możesz albo importować całą czcionkę niesamowitą mniej przy użyciu @import "node_modules/font-awesome/less/font-awesome.less", albo zajrzeć do tego pliku i zaimportować tylko potrzebne komponenty. Myślę, że to minimum dla podstawowych ikon:

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

Pamiętaj, że nadal nie zaoszczędzisz tak wielu bajtów. Tak czy inaczej, skończysz zawierając między 2-3 tys. Linii niezminifikowanego kodu CSS.

Będziesz także musiał udostępniać same czcionki z folderu o nazwie /fonts/w katalogu publicznym. Możesz po prostu skopiować je tam za pomocą prostego zadania, na przykład:

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

Musisz ustawić odpowiednią ścieżkę czcionki. na przykład

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

W moim pliku 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');

Będziesz musiał skopiować pliki w ramach procesu kompilacji. Na przykład możesz użyć npm postinstallskryptu, aby skopiować pliki do odpowiedniego katalogu:

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

W przypadku niektórych narzędzi do budowania istnieją już pakiety z niesamowitymi czcionkami. Na przykład pakiet internetowy zawiera pakiet font-awesome-webpack, który pozwala na proste require('font-awesome-webpack').

Korzystanie z pakietu webpack i scss:

Zainstaluj font-awesome za pomocą npm (korzystając z instrukcji konfiguracji na https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Następnie, używając -WebPACK-plugin kopiowaniem , skopiuj Czcionki Webfonts Folder z node_modules do swojej dist folderu podczas procesu kompilacji WebPACK. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

W webpack.config.js skonfiguruj copy-webpack-plugin . UWAGA: Domyślnym folderem dist w pakiecie webpack 4 jest „dist”, dlatego kopiujemy folder webfonts z node_modules do folderu dist.

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

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

Na koniec, w pliku main.scss , powiedz fontawesome, gdzie folder webfonts został skopiowany i zaimportuj żądane pliki SCSS z 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` 

i zastosuj poniższe font-familydo żądanych regionów w dokumencie HTML, w których chcesz używać niesamowitych ikon.

Przykład :

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

Za pomocą expressjs upublicznij to:

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

Możesz to zobaczyć pod adresem: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Możesz dodać go między <head></head>tagiem w następujący sposób:

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

Albo jakakolwiek jest twoja ścieżka node_modules.

Edytuj (26.06.2017) - Zastrzeżenie: SĄ LEPSZE ODPOWIEDZI. PROSZĘ NIE UŻYWAĆ TEJ METODY. W chwili udzielenia tej pierwotnej odpowiedzi dobre narzędzia nie były tak powszechne. Przy obecnych narzędziach do kompilacji, takich jak webpack lub browserify, prawdopodobnie nie ma sensu używać tej odpowiedzi. Mogę to usunąć, ale myślę, że ważne jest, aby podkreślić różne dostępne opcje i możliwe zalecenia, a czego nie.

Ponieważ obecnie uczę się node js, napotkałem również ten problem. Przede wszystkim zainstalowałem font-awesome za pomocą npm

npm install font-awesome --save-dev

potem ustawiłem folder statyczny na css i czcionki:

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

oraz w html:

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

i działa dobrze!

Jeśli używasz npm, możesz użyć Gulp.js, narzędzia do budowania pakietów Font Awesome z SCSS lub LESS. Ten przykład skompiluje kod z SCSS.

1. Zainstaluj Gulp.js v4 lokalnie i CLI V2 globalnie.

2. Zainstaluj wtyczkę o nazwie gulp-sass przy użyciu npm.

3. Utwórz plik main.scss w folderze publicznym i użyj tego kodu:

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

4. Utwórz plik gulpfile.js w katalogu aplikacji i skopiuj go.

   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. Uruchom „gulp build” w wierszu poleceń i obserwuj magię.

Natknąłem się na to pytanie, mając podobny problem i pomyślałem, że podzielę się innym rozwiązaniem:

Jeśli tworzysz aplikację Javascript, do niesamowitych ikon czcionek można się również odwoływać bezpośrednio przez JavaScript:

Najpierw wykonaj czynności opisane w tym przewodniku :

npm install @fortawesome/fontawesome-svg-core

Następnie w swoim 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' })

Po wykonaniu powyższych czynności możesz wstawić ikonę do węzła HTML za pomocą:

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

Możesz również uzyskać dostęp do ciągu HTML reprezentującego ikonę za pomocą:

fontIcon.html