답변:
다음으로 설치 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 줄의 축소되지 않은 CSS를 포함하게 될 것입니다.
또한 /fonts/공용 디렉토리에 있는 폴더에서 글꼴 자체를 제공해야합니다 . 다음과 같이 간단한 꿀꺽 꿀꺽 작업으로 복사 할 수 있습니다.
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/"일부 빌드 도구에는 이미 존재하는 멋진 글꼴 패키지가 있습니다. 예를 들어, webpack에는 font-awesome-webpack 이있어 require('font-awesome-webpack').
웹팩 및 scss 사용 :
npm을 사용하여 font-awesome을 설치 하십시오 (https://fontawesome.com/how-to-use 의 설정 지침 사용 ).
npm install @fortawesome/fontawesome-free다음으로 copy-webpack-plugin을 사용하여 웹 폰트 를 복사합니다 . 에서 폴더 node_modules 당신에게 DIST 당신의 웹팩 빌드 과정에서 폴더. ( https://github.com/webpack-contrib/copy-webpack-plugin )
npm install copy-webpack-plugin에서 webpack.config.js , 구성 복사 웹팩 - 플러그인 . 참고 : 기본 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에서 를 Where 파일, 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-familyfontawesome 아이콘을 사용하려는 html 문서의 원하는 영역에 다음 을 적용하십시오 .
예 :
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변경되면 다른 답변만큼 조정 또는 유지 관리가 필요합니다. 차이점은이 답변에는 번역이나 작업이 필요하지 않습니다. 가져 오기를 예상해야하는 위치에 정확히 배치합니다. A의 <link>태그입니다.
현재 노드 js를 배우고 있기 때문에이 문제도 발생했습니다. 내가 한 모든 것은 우선 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를 사용하여 SCSS 또는 LESS에서 Font Awesome 패키지를 빌드 할 수 있습니다. 이 예제는 SCSS에서 코드를 컴파일합니다.
Gulp.js v4를 로컬로 설치 하고 CLI V2를 글로벌로 설치합니다 .
npm을 사용하여 gulp -sass 라는 플러그인을 설치합니다 .
공용 폴더에 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 응용 프로그램을 만드는 경우 Javascript를 통해 글꼴 멋진 아이콘을 직접 참조 할 수도 있습니다.
먼저이 가이드 의 단계를 수행하세요 .
npm install @fortawesome/fontawesome-svg-core그런 다음 자바 스크립트 내부 :
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