Как использовать иконки font-awesome из узловых модулей

Я установил иконки font-awesome 4.0.3, используя npm install.

Если мне нужно использовать его из узловых модулей, как мне использовать его в файле html?

Если мне нужно отредактировать файл less, нужно ли мне редактировать его в модулях узлов?

Установить как npm install font-awesome --save-dev

В вашем файле development less вы можете либо импортировать весь шрифт awesome с меньшим использованием @import "node_modules/font-awesome/less/font-awesome.less", либо заглянуть в этот файл и импортировать только те компоненты, которые вам нужны. Думаю, это минимум для основных иконок:

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

Обратите внимание: вы все равно не сэкономите столько байтов, сделав это. В любом случае вы в конечном итоге включите от 2 до 3 тысяч строк неминифицированного CSS.

Вам также необходимо будет обслуживать сами шрифты из папки, которая называется /fonts/в вашем общедоступном каталоге. Вы можете просто скопировать их туда с помощью простой задачи gulp, например:

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

Вы должны установить правильный путь к шрифту. например

мой-стиль.scss

$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}

В моем файле 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');

Вам нужно будет скопировать файлы как часть процесса сборки. Например, вы можете использовать npm postinstallсценарий для копирования файлов в правильный каталог:

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

Для некоторых инструментов сборки уже существуют пакеты font-awesome. Например, в webpack есть font-awesome-webpack, который позволяет вам просто require('font-awesome-webpack').

Используя webpack и scss:

Установите font-awesome с помощью npm (используя инструкции по установке на https://fontawesome.com/how-to-use )

npm install @fortawesome/fontawesome-free

Далее, с помощью копирования-WebPack-плагин , скопируйте WebFonts папки из node_modules в ваше DIST папки во время процесса сборки WebPack. ( https://github.com/webpack-contrib/copy-webpack-plugin )

npm install copy-webpack-plugin

В webpack.config.js настройте copy-webpack-plugin . ПРИМЕЧАНИЕ. Папка dist для webpack 4 по умолчанию - «dist», поэтому мы копируем папку webfonts из node_modules в папку dist.

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

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

Наконец, в файле main.scss укажите fontawesome, куда была скопирована папка веб- шрифтов, и импортируйте нужные файлы SCSS из 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` 

и примените следующее font-familyк желаемой области (ам) в вашем html-документе, где вы хотите использовать значки fontawesome.

Пример :

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

С помощью expressjs откройте его:

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

И вы можете увидеть это по адресу: yourdomain.com/stylesheets/fontawesome/css/all.min.css

Вы можете добавить его между <head></head>тегами так:

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

Или каким бы ни был ваш путь к вашему node_modules.

Изменить (2017-06-26) - Отказ от ответственности: ЕСТЬ ЛУЧШИЕ ОТВЕТЫ. ПОЖАЛУЙСТА, НЕ ИСПОЛЬЗУЙТЕ ЭТОТ МЕТОД. Во время этого первоначального ответа хорошие инструменты не были столь распространены. С текущими инструментами сборки, такими как webpack или browserify, вероятно, нет смысла использовать этот ответ. Я могу удалить его, но я думаю, что важно выделить различные варианты, которые у него есть, и возможные действия, которые можно и чего нельзя делать.

Поскольку я сейчас изучаю node js, я тоже столкнулся с этой проблемой. Все, что я сделал, это в первую очередь установил font-awesome с помощью npm

npm install font-awesome --save-dev

после этого я установил статическую папку для css и шрифтов:

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

и в html:

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

и работает нормально!

Если вы используете npm, вы можете использовать Gulp.js как инструмент сборки для сборки пакетов Font Awesome из SCSS или LESS. В этом примере будет компилироваться код из SCSS.

1. Установите Gulp.js v4 локально и CLI V2 глобально.

2. Установите плагин gulp-sass с помощью npm.

3. Создайте файл main.scss в своей общей папке и используйте этот код:

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

4. Создайте файл gulpfile.js в каталоге вашего приложения и скопируйте его.

   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. Запустите команду gulp build в командной строке и наблюдайте за волшебством.

Я столкнулся с этим вопросом с похожей проблемой и подумал, что поделюсь другим решением:

Если вы создаете приложение Javascript, на значки font awesome можно ссылаться напрямую через Javascript:

Сначала выполните действия, описанные в этом руководстве :

npm install @fortawesome/fontawesome-svg-core

Затем внутри вашего 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' })

После вышеуказанных шагов вы можете вставить значок внутри узла HTML с помощью:

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

Вы также можете получить доступ к строке HTML, представляющей значок, с помощью:

fontIcon.html