如何从节点模块使用字体超棒的图标

我已经使用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。