css - 如何使用 Node 模块中的 Font Awesome 图标

Question

我已经使用 npm install 安装了 font-awesome 4.0.3 图标。

如果我需要从 node-modules 中使用它，我应该如何在 html 文件中使用它？

如果我需要编辑 less 文件，是否需要在 node-modules 中进行编辑？

Answer 1

安装为 npm install font-awesome --save-dev

在你的 development less 文件中，你可以使用 @import "node_modules/font-awesome/less/font-awesome.less" 导入整个字体 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。

您还需要从公共(public)目录中名为/fonts/ 的文件夹中提供字体本身。您可以通过简单的 gulp 任务将它们复制到那里，例如:

gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})