css – 如何使用来自节点模块的字体真棒图标

前端之家收集整理的这篇文章主要介绍了css – 如何使用来自节点模块的字体真棒图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经安装了font-awesome 4.0.3图标使用npm install。

如果我需要使用它从node-modules我应该如何使用它在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行的unminified CSS。

您还需要从公用目录中名为/ fonts /的文件夹中自行提供字体。你可以只用一个简单的gulp任务复制它们,例如:

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

猜你在找的CSS相关文章