노드 모듈에서 폰트 어썸 아이콘을 사용하는 방법
다음을 사용하여 폰트 어썸 4.0.3 아이콘은npm install.
노드 모듈에서 사용해야 하는 경우 HTML 파일에서 어떻게 사용해야 합니까?
더 적은 파일을 편집해야 하는 경우 노드 모듈에서 편집해야 합니까?
다음으로 설치npm install font-awesome --save-dev
당신의 developmentless 파일에서, 당신은 전체 글꼴을 더 적게 가져올 수 있습니다.@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,000 줄의 최소화되지 않은 CSS를 포함하게 될 것입니다.
또한 다음 폴더에서 글꼴 자체를 제공해야 합니다./fonts/사용자의 공개 디렉토리에 있습니다.다음과 같은 간단한 한 모금 작업으로 복사할 수 있습니다.
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})
적절한 글꼴 경로를 설정해야 합니다.
my-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;
}
다음을 에 추가합니다..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/"
일부 빌드 도구의 경우 기존에 글꼴을 포함한 패키지가 있습니다.예를 들어 webpack은 폰트-어썸-webpack을 가지고 있는데, 이것은 당신이 단순하게 해줍니다.require('font-awesome-webpack').
웹 팩 및 scss 사용:
npm을 사용하여 글꼴 고정 설치(https://fontawesome.com/how-to-use) 의 설정 지침 사용)
npm install @fortawesome/fontawesome-free
그런 다음 copy-webpack-plugin을 사용하여 webpack 빌드 프로세스 중에 node_modules에서 dist 폴더로 webfonts 폴더를 복사합니다.(https://github.com/webpack-contrib/copy-webpack-plugin)
npm install copy-webpack-plugin
webpack.config.js에서 copy-webpack-plugin을 구성합니다.참고: 기본 webpack 4 dist 폴더는 "dist"이므로 node_modules에서 dist 폴더로 webfonts 폴더를 복사합니다.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
마지막으로 main.scss 파일에서 webfonts 폴더가 복사된 위치를 fontawesome에 알려주고 node_modules에서 원하는 SCSS 파일을 가져옵니다.
$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 문서의 원하는 영역으로 이동합니다.
예:
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) - 고지 사항: 더 나은 답변이 있습니다. 이 방법을 사용하지 마십시오.이 원답 당시에는 좋은 도구가 널리 보급되어 있지 않았습니다.웹팩이나 브라우저리파이와 같은 현재 빌드 도구를 사용하는 경우, 이 답변을 사용하는 것은 아마도 이치에 맞지 않을 것입니다.삭제할 수는 있지만, 자신이 가지고 있는 다양한 옵션과 가능한 실행 및 실행 중지를 강조하는 것이 중요하다고 생각합니다.
저는 현재 노드 j를 배우고 있기 때문에 이 문제에 직면하기도 했습니다.제가 한 일은 우선 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">
그리고 그것은 잘 작동합니다!
저는 비슷한 문제를 안고 있는 이 질문에 직면했고 다른 해결책을 공유하려고 생각했습니다.
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
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'를 실행하여 마법을 관찰합니다.
SAS 모듈 버전
곧, 용을 합니다.@import공격은 평가 절하됩니다.SAS 모듈 구성은 다음을 사용하여 작동합니다.@use대신.
@use "../node_modules/font-awesome/scss/font-awesome" with (
$fa-font-path: "../icons"
);
.icon-user {
@extend .fa;
@extend .fa-user;
}
언급URL : https://stackoverflow.com/questions/21406538/how-to-use-font-awesome-icons-from-node-modules
'programing' 카테고리의 다른 글
| 시퀀스 "HIbernATE_SEQUENCE"를 찾을 수 없습니다. SQL 문 (0) | 2023.08.24 |
|---|---|
| XMLHttpRequest를 통해 파일을 멀티파트로 보냅니다. (0) | 2023.08.24 |
| ExpressJS - 로더 처리되지 않은 오류 이벤트 (0) | 2023.08.24 |
| 폴더를 라벨로 만들기 전에 폴더가 있는지 확인하는 방법은 무엇입니까? (0) | 2023.08.24 |
| 추가 방지 ▁prevent추가ed▁content▁adding 추가 방지 ▁prevent추가ed▁content▁adding 추가 방지 ▁prevent추가ed▁content▁addingENTER - Chrome에서 (0) | 2023.08.24 |