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


111

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

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

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


Вы когда-нибудь придумывали «правильный» способ сделать это? В настоящее время я просто использую задачу gulp, чтобы скопировать материал из node_modules в мой общедоступный каталог.
sjmeverett

Позже я использовал его в качестве компонента беседки ...
Гован

Ответы:


106

Установить как 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'))
})

9
Следует особо подчеркнуть, что шрифты также нужно было размещать в папке шрифтов ... Я, наверное, час пытался разобраться в этой простой мелочи.
Alex J

3
Вы также можете изменить путь статики шрифта, установив переменную fa-font-pathв желаемое место.
zusatzstoff

В приведенном выше примере вам нужно следовать за вашим меньшим импортом со следующим переопределением, чтобы файлы шрифтов с потрясающим шрифтом, скопированные с помощью gulp, были найдены после развертывания:@fa-font-path: "/public/fonts";
CAK2,

56

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

мой-стиль.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
То же и с дерзостью. Путь ../assets/font-awesome/fontsмне подходит. Спасибо.
Андрей

16

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

12

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

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

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


11

Используя 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)
    }

1
у меня отлично работает, мне просто нужно было настроить путь от @import "../node_modules/[...]"до@import "@/../node_modules/[...]"
мекограф

Вы можете добавить псевдоним к webpack.config.js: resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}а затем@import "node_modules/[...]
Стивен Альмерот

8

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

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

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


FontAwesome рекомендует устанавливать их пакет npm как devDependency. Чтобы это решение работало (в производстве), должен ли пакет быть установлен как обычная зависимость?
Джон Дж. Камиллери

1
Чтобы ответить на мой собственный вопрос: да, его нужно устанавливать вместе, --saveа не--save-dev
Джон Дж. Камиллери

5

Вы можете добавить его между <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, вероятно, нет смысла использовать этот ответ. Я могу удалить его, но я думаю, что важно выделить различные варианты, которые у него есть, и возможные действия, которые можно и чего нельзя делать.


16
Я не думаю, что кто-то захочет включать каталог node_modules в сборку и ссылаться на него напрямую.
Fabian Leutgeb

5
Я понимаю, но это еще вариант. Нет однозначного решения. :) Если у вас есть система комплектации, то можете @import '../node_modules/...'как и другие ответы указали.
Con Antonakos,

1
по сравнению с другими ответами, я считаю, что это лучше всего. вы все еще ссылаетесь на относительный путь через node_modules в других ответах. если расположение файла css внутри font-awesomeдолжно измениться, это потребует настройки или обслуживания, как и другие ответы. разница в том, что этот ответ не требует перевода или задач. он просто размещает импорт именно там, где его следует ожидать; в <link>теге.
североамериканский

3
У простого фордера npm должно быть не менее 10+ МБ, и ни один пользователь не захочет добавлять этот вес к проекту по какой-либо причине. Весь смысл npm в том, чтобы помогать во время разработки и минимизировать / уменьшать размер производства после сборки. Не думайте, что это хороший вариант, даже если он работает. ; )
T04435

Я добавил следующее заявление об отказе от ответственности: во время этого исходного ответа хорошие инструменты не были столь распространены. С текущими инструментами сборки, такими как webpack или browserify, вероятно, нет смысла использовать этот ответ. Я могу удалить его, но я думаю, что важно выделить различные варианты, которые у него есть, и возможные действия, которые можно и чего нельзя делать.
Con

3

Поскольку я сейчас изучаю 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">

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


2

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


0

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

Если вы создаете приложение 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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.