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

111

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?

Govan
źródło
Czy kiedykolwiek wymyśliłeś „właściwy” sposób, aby to zrobić? Obecnie używam tylko jednego zadania, aby skopiować dane z node_modules do mojego katalogu publicznego.
sjmeverett
Użyłem go później jako komponentu altanki ...
Govan,

Odpowiedzi:

106

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'))
})
Kevin Carmody
źródło
9
Należy bardziej podkreślić, że czcionki musiały być również podawane do folderu z czcionkami ... Prawdopodobnie spędziłem godzinę próbując rozgryźć tę prostą rzecz.
Alex J
3
Możesz również dostosować ścieżkę statyczną czcionki, ustawiając zmienną fa-font-pathw żądanej lokalizacji.
zusatzstoff
W powyższym przykładzie musisz podążać za mniejszymi importami z następującym zastąpieniem, aby pliki czcionek z niesamowitymi czcionkami skopiowane przez gulp zostały znalezione po wdrożeniu:@fa-font-path: "/public/fonts";
CAK2
56

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;
}
Andreas Frische
źródło
3
To samo dla sassa. Ścieżka ../assets/font-awesome/fontsdziała na mnie. Dzięki.
Andrey
16

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');
Rozpoznać
źródło
12

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

Wilfred Hughes
źródło
11

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)
    }
pawelglow
źródło
1
dla mnie działa dobrze, musiałem tylko dostosować ścieżkę od @import "../node_modules/[...]"do@import "@/../node_modules/[...]"
mekograf
Możesz dodać alias do webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}a następnie@import "node_modules/[...]
Steven Almeroth
8

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

Kimprosh
źródło
FontAwesome zaleca, aby ich pakiet npm został zainstalowany jako plik devDependency. Aby to rozwiązanie działało (w środowisku produkcyjnym), czy pakiet powinien być instalowany jako zwykła zależność?
John J. Camilleri,
1
Odpowiadając na moje własne pytanie: tak, musi być zainstalowany z, --savea nie--save-dev
John J. Camilleri
5

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.

Con Antonakos
źródło
16
Nie sądzę, aby ktokolwiek chciał dołączyć katalog node_modules do kompilacji i bezpośrednio odnosić się do niego.
Fabian Leutgeb
5
Rozumiem, ale to wciąż opcja. Nie ma jednej odpowiedzi na rozwiązanie. :) Jeśli masz system sprzedaży wiązanej, możesz @import '../node_modules/...'polubić inne wskazane odpowiedzi.
Con Antonakos
1
w porównaniu z innymi odpowiedziami uważam, że tak jest najlepiej. nadal odwołujesz się do ścieżki względnej za pośrednictwem modułów node_modules w innych odpowiedziach. gdyby font-awesomezmieniła się lokalizacja pliku css , wymagałoby to poprawienia lub konserwacji tak samo, jak inne odpowiedzi. różnica polega na tym, że ta odpowiedź nie wymaga transpilacji ani zadań. po prostu umieszcza import dokładnie tam, gdzie powinien; w <link>tagu.
północnoamerykańska
3
Prosty forder npm będzie miał minimum 10 + MB, żaden użytkownik nie będzie chciał dodać tej wagi do projektu z jakiegokolwiek powodu. Celem npm jest pomoc w fazie rozwoju i zminimalizowanie / zmniejszenie rozmiaru produkcji po zbudowaniu. Nie myśl, że to dobra opcja, nawet jeśli działa. ; )
T04435
Dodałem następujące zastrzeżenie: W czasie, gdy otrzymałem tę pierwotną odpowiedź, dobre narzędzia nie były tak rozpowszechnione. 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.
Con Antonakos
3

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!

alvinsandwich
źródło
2

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ę.

Ryan
źródło
0

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
jrook
źródło