如何从节点模块使用字体超棒的图标
我已经使用npm install安装了字体超棒的4.0.3图标。
如果我需要从node-modules中使用它，我应该如何在html文件中使用它？
如果我需要编辑较less的文件，我需要在节点模块中编辑它？
安装为npm install font-awesome --save-dev
在开发less的文件中，可以使用@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千行的未完成的CSS。
您还需要从公用目录中的/fonts/文件夹中提供/fonts/ 。 你可以用一个简单的gulp任务复制它们，例如：
gulp.task('fonts', function() { return gulp.src('node_modules/font-awesome/fonts/*') .pipe(gulp.dest('public/fonts')) })
你必须设置适当的字体path。 例如
我-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; }
您将需要复制文件作为您的构build过程的一部分。 例如，您可以使用npm postinstall脚本将文件复制到正确的目录中：
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
对于一些构build工具，有预先存在的字体真棒包。 例如，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');
你可以在你的<head></head>标签之间添加它，如下所示：
<head> <link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"> </head>
或者不pipe你的node_modules是什么path。
编辑（2017-06-26） – 免责声明：在这个原始的答案时，好工具并不普遍。 使用当前的构build工具，如webpack或browserify，使用这个答案可能没有意义。 我可以删除它，但我认为重要的是突出各种选项和可能的dos和do nots。
