노드 모듈에서 멋진 글꼴 아이콘을 사용하는 방법
을 사용하여 글꼴 멋진 4.0.3 아이콘을 설치했습니다 npm install.
노드 모듈에서 사용해야하는 경우 html 파일에서 어떻게 사용해야합니까?
적은 파일을 편집해야하는 경우 노드 모듈에서 편집해야합니까?
다음으로 설치 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'))
})
적절한 글꼴 경로를 설정해야합니다. 예 :
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;
}
빌드 프로세스의 일부로 파일을 복사해야합니다. 예를 들어 npm postinstall스크립트를 사용 하여 파일을 올바른 디렉토리에 복사 할 수 있습니다 .
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
일부 빌드 도구에는 이미 존재하는 멋진 글꼴 패키지가 있습니다. 예를 들어, webpack에는 font-awesome-webpack 이있어 require('font-awesome-webpack').
내 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');
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)-면책 조항 :이 원래 답변 당시에는 좋은 도구가 널리 보급되지 않았습니다. webpack 또는 browserify와 같은 현재 빌드 도구를 사용하면이 답변을 사용하는 것이 이치에 맞지 않을 것입니다. 삭제할 수는 있지만 다양한 옵션과 할 수있는 일과 할 수없는 일을 강조하는 것이 중요하다고 생각합니다.
웹팩 및 scss 사용 :
npm을 사용하여 font-awesome을 설치 하십시오 (https://fontawesome.com/how-to-use 의 설정 지침 사용 ).
npm install @fortawesome/fontawesome-free
다음으로, 사용 복사 웹팩 - 플러그인 , 복사 웹 글꼴을 에서 폴더 node_modules 당신에게 DIST 당신의 웹팩 빌드 과정에서 폴더. ( https://github.com/webpack-contrib/copy-webpack-plugin )
npm install copy-webpack-plugin
In webpack.config.js, configure copy-webpack-plugin. NOTE: The default webpack 4 dist folder is "dist", so we are copying the webfonts folder from node_modules to the dist folder.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
Lastly, in your main.scss file, tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from 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";
If you're using npm you could use Gulp.js a build tool to build your Font Awesome packages from SCSS or LESS. This example will compile the code from SCSS.
Install Gulp.js v4 locally and CLI V2 globally.
Install a plugin called gulp-sass using npm.
Create a main.scss file in your public folder and use this code:
$fa-font-path: "../webfonts"; @import "fontawesome/fontawesome"; @import "fontawesome/brands"; @import "fontawesome/regular"; @import "fontawesome/solid"; @import "fontawesome/v4-shims";Create a gulpfile.js in your app directory and copy this.
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) );Run 'gulp build' in your command line and watch the magic.
Since I'm currently learning node js, I also encountered this problem. All I did was, first of all, install the font-awesome using npm
npm install font-awesome --save-dev
after that, I set a static folder for the css and fonts:
app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));
and in html:
<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">
and it works fine!
I came upon this question having a similar problem and thought I would share another solution:
If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:
First, do the steps in this guide:
npm install @fortawesome/fontawesome-svg-core
Then inside your 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' })
After the above steps, you can insert the icon inside an HTML node with:
htmlNode.appendChild(fontIcon.node[0]);
You can also access the HTML string representing the icon with:
fontIcon.html
참고URL : https://stackoverflow.com/questions/21406538/how-to-use-font-awesome-icons-from-node-modules
'Programming' 카테고리의 다른 글
| SQLAlchemy ORM을 사용하여 효율적으로 데이터베이스 업데이트 (0) | 2020.08.15 |
|---|---|
| 'async void'이벤트 핸들러를 피해야합니까? (0) | 2020.08.14 |
| 이름이 같은 두 개의 클래스를 가져옵니다. (0) | 2020.08.14 |
| JavaScript를 MySQL과 연결할 수 있습니까? (0) | 2020.08.14 |
| 자바 : 속성 파일에서 줄 바꿈이 가능합니까? (0) | 2020.08.14 |