Jak używać font-awesome icons from node-modules

Zainstalowałem font-awesome 4.0.3 icons używając npm install.

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

Jeśli muszę edytować plik less, Czy muszę edytować go w modułach węzłowych?

Author: jrharshath, 2014-01-28
Source

11 answers

Install as npm install font-awesome --save-dev

W pliku development less możesz albo zaimportować całą czcionkę awesome less używając @import "node_modules/font-awesome/less/font-awesome.less", albo zajrzeć do tego pliku i zaimportować tylko potrzebne komponenty. Myślę, że jest 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";

jako notatkę, nadal nie zamierzasz zapisać tak wielu bajtów, robiąc to. Tak czy inaczej, skończysz w tym między 2-3K liniami niezminifikowanego CSS.

Będziesz musiał również podawać same czcionki z folderu wywołane /fonts/ w katalogu publicznym. Możesz po prostu skopiować je tam za pomocą prostego zadania gulp, na przykład: 

gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})
 109
Author: Kevin Carmody,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-19 19:58:47

Musisz ustawić właściwą ścieżkę czcionki. np.

Mój styl.scss 
$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}
 56
Author: Andreas Frische,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-05 12:59:04

W moim stylu.plik 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');
 17
Author: Ken,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-01 18:37:21

Będziesz musiał skopiować pliki w ramach procesu budowania. Na przykład, możesz użyć skryptu npm postinstall, Aby skopiować pliki do odpowiedniego katalogu:

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

Dla niektórych narzędzi do budowania, istnieją wcześniej istniejące pakiety Font-awesome. Na przykład, webpack ma font-awesome-webpack co pozwala na proste require('font-awesome-webpack').

 13
Author: Wilfred Hughes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-19 19:52:07

Korzystanie z webpack i scss:

Install font-awesome using npm (using the setup instructions on https://fontawesome.com/how-to-use ) 

npm install @fortawesome/fontawesome-free

Następnie, używając wtyczki copy-webpack-plugin, skopiuj folder webfonts z folderu node_modules do folderu dist podczas procesu budowania pakietu webpack. ( https://github.com/webpack-contrib/copy-webpack-plugin ) 

npm install copy-webpack-plugin

W webpack.config.js, konfiguracja copy-webpack-plugin . Uwaga: domyślnym folderem dist webpack 4 jest "dist", więc 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'}
        ])
    ]
}

Wreszcie, w Twoim głównym.scss plik, powiedz fontawesome, gdzie folder webfonts został skopiowany i Zaimportuj pliki SCSS, które chcesz 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 następujące font-family do żądanego obszaru (- ów) w dokumencie html, w którym chcesz użyć fontawesome ikony.

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)
    }
 11
Author: pawelglow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-29 16:42:01

Z expressjs, public it: 

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

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

 8
Author: Kimprosh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-22 08:35:59

Ponieważ obecnie uczę się node js, napotkałem również ten problem. Wszystko, co zrobiłem, to przede wszystkim zainstalowanie czcionki-awesome za pomocą npm 

npm install font-awesome --save-dev

Następnie ustawiam statyczny folder dla css i czcionek: 

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!
 5
Author: alvinsandwich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-17 05:37:12

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

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

Czy jakakolwiek jest Twoja droga do node_modules.

Edit (2017-06-26) - Zastrzeżenie: są lepsze odpowiedzi. PROSZĘ NIE UŻYWAĆ TEJ METODY. W czasie tej oryginalnej odpowiedzi, dobre narzędzia nie były tak powszechne. Przy obecnych narzędziach do budowania, takich jak webpack lub browserify, prawdopodobnie nie ma sensu używać tej odpowiedzi. Mogę go usunąć, ale myślę, że ważne jest, aby podkreślić różne opcje, które ma i możliwe dos i nie rób nic.

 5
Author: Con Antonakos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-23 21:07:43

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

  1. Install JS V4 lokalnie i CLI v2 globalnie.

  2. Zainstaluj plugin o nazwie gulp-sass używając npm.

  3. Utwórz main.plik 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 to.

    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 linii poleceń i obserwuj magię.

 2
Author: wattry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-06 14:33:52

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, ikony Font awesome mogą być również odwoływane bezpośrednio przez Javascript:

Najpierw wykonaj kroki w ten przewodnik : 

npm install @fortawesome/fontawesome-svg-core

Następnie wewnątrz twojego 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 kroków możesz wstawić Ikonę wewnątrz węzła HTML za pomocą: 

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

Możesz również uzyskać dostęp do ciągu HTML reprezentującego ikona z: 

fontIcon.html
 2
Author: jrook,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-26 03:10:34

Wersja modułów SASS

Wkrótce użycie @import w sass zostanie zdeprecjonowane. Konfiguracja modułów SASS działa za pomocą @use.

@use "../node_modules/font-awesome/scss/font-awesome"  with (
  $fa-font-path: "../icons"
);

.icon-user {
  @extend .fa;
  @extend .fa-user;
}
 0
Author: delmarr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-10-16 14:00:39