Подтвердить что ты не робот

Как использовать шрифт-удивительные значки из node -модулей

Я установил значки шрифта 4.0.3 с помощью npm install.

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

Если мне нужно отредактировать файл меньшего размера, мне нужно его отредактировать в node -modules?

4b9b3361

ОТВЕТЫ

Ответ 1

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

В вашем файле с уменьшенным объемом разработки вы можете либо импортировать весь шрифт, а не использовать @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-3k строк unminified CSS.

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

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

Ответ 2

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

мой-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;
}

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

С expressjs, public это:

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

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

Ответ 6

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

Ответ 7

Используя 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. ПРИМЕЧАНИЕ. По умолчанию папкой webpack 4 dist является папка 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, куда была скопирована папка webfonts, и импортируйте нужные файлы SCSS из node_modules.

$fa-font-path: "/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
@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";

Ответ 8

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

Ответ 9

Поскольку я в настоящее время изучаю узел 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">

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

Ответ 10

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

Если вы создаете Javascript-приложение, на шрифтовые иконки также можно ссылаться непосредственно через 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