Gov*_*van 104 css less node.js npm font-awesome
我已经安装了font-awesome 4.0.3图标npm install.
如果我需要从节点模块中使用它我应该如何在html文件中使用它？
如果我需要编辑less文件,我需要在节点模块中编辑吗？
Kev*_*ody 101
安装为 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任务将它们复制到那里,例如:
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})
And*_*che 48
您必须设置正确的字体路径.例如
$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
@extend .fa;
@extend .fa-user;
}
小智 12
在我的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');
Wil*_*hes 11
您需要在构建过程中复制文件.例如,您可以使用npm postinstall脚本将文件复制到正确的目录:
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
对于某些构建工具,有一些预先存在的字体很棒的软件包.例如,webpack有font-awesome-webpack,可以让你简单require('font-awesome-webpack').
ppp*_*cki 11
使用 webpack 和 scss：
使用 npm 安装 font-awesome（使用https://fontawesome.com/how-to-use上的设置说明）
npm install @fortawesome/fontawesome-free
接下来，在 webpack 构建过程中，使用copy-webpack-plugin将webfonts文件夹从node_modules复制到您的dist文件夹。( https://github.com/webpack-contrib/copy-webpack-plugin )
npm install copy-webpack-plugin
在webpack.config.js 中，配置copy-webpack-plugin。注意：默认的 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文件中，告诉 fontawesome webfonts文件夹已复制到的位置，并从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-familyhtml 文档中要使用 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)
}
小智 7
使用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），使用此答案可能没有意义。我可以删除它，但我认为突出显示一个人拥有的各种选项以及可能的注意事项很重要。
小智 5
由于我目前正在学习node js，所以也遇到了这个问题。我所做的就是，首先，使用 npm 安装 font-awesome
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">
它工作正常！
| 归档时间： |
|
| 查看次数： |
105166 次 |
| 最近记录： |