을 사용하여 글꼴 멋진 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;
}답변
내 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');답변
빌드 프로세스의 일부로 파일을 복사해야합니다. 예를 들어 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)
}답변
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와 같은 현재 빌드 도구를 사용하면이 답변을 사용하는 것이 이치에 맞지 않을 것입니다. 삭제할 수는 있지만 다양한 옵션과 할 수있는 일과 할 수없는 일을 강조하는 것이 중요하다고 생각합니다.
