Я установил иконки font-awesome 4.0.3, используя npm install
.
Если мне нужно использовать его из узловых модулей, как мне использовать его в файле html?
Если мне нужно отредактировать файл less, нужно ли мне редактировать его в модулях узлов?
Я установил иконки 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'))
})
fa-font-path
в желаемое место.
@fa-font-path: "/public/fonts";
Вы должны установить правильный путь к шрифту. например
$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
@extend .fa;
@extend .fa-user;
}
../assets/font-awesome/fonts
мне подходит. Спасибо.
Вам нужно будет скопировать файлы как часть процесса сборки. Например, вы можете использовать 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)
}
@import "../node_modules/[...]"
до@import "@/../node_modules/[...]"
resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}
а затем@import "node_modules/[...]
С помощью expressjs откройте его:
app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));
И вы можете увидеть это по адресу: yourdomain.com/stylesheets/fontawesome/css/all.min.css
devDependency
. Чтобы это решение работало (в производстве), должен ли пакет быть установлен как обычная зависимость?
--save
а не--save-dev
Вы можете добавить его между <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, вероятно, нет смысла использовать этот ответ. Я могу удалить его, но я думаю, что важно выделить различные варианты, которые у него есть, и возможные действия, которые можно и чего нельзя делать.
@import '../node_modules/...'
как и другие ответы указали.
font-awesome
должно измениться, это потребует настройки или обслуживания, как и другие ответы. разница в том, что этот ответ не требует перевода или задач. он просто размещает импорт именно там, где его следует ожидать; в <link>
теге.
Поскольку я сейчас изучаю 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.
Установите Gulp.js v4 локально и CLI V2 глобально.
Установите плагин gulp-sass с помощью npm.
Создайте файл main.scss в своей общей папке и используйте этот код:
$fa-font-path: "../webfonts";
@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/regular";
@import "fontawesome/solid";
@import "fontawesome/v4-shims";
Создайте файл 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)
);
Запустите команду 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