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

标签 css node.js less npm font-awesome

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

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

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

最佳答案

安装为 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'))
})

关于css - 如何使用 Node 模块中的 Font Awesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21406538/

相关文章:

html - 关于 float none 和 float left 元素的负边距的混淆

javascript - 将对象从 jade 传递到 angularjs 模板

css - 在 Espresso 2 中使用 LESS 的最佳方式是什么?

html - 将按钮置于 3 个 div 下方

css - 什么时候在 CSS 中使用 `>` 标志?

CSS 选择器优先级

node.js - 如何在node.js中获取base64字符串的字节长度?

node.js - 在 NodeJS 中将 200'000 行以上的大型 csv 文件插入 MongoDB

css - 更少的 CSS 混入 : how can i hide styles when variable is a specific value?

css - 不是选择器没有分配给子 div 内的 img