Question

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

如果我需要从节点模块中使用它，我应该如何在html文件中使用它？

如果我需要编辑less文件，我需要在node-modules中编辑吗？

Answer 1

安装为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行未经授权的CSS。

您还需要从公共目录中名为/fonts/的文件夹中提供字体。您可以使用简单的gulp任务将它们复制到那里，例如：

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

Answer 2

您必须设置正确的字体路径。 e.g。

MY-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;
}

Answer 3

您需要在构建过程中复制文件。例如，您可以使用npm postinstall脚本将文件复制到正确的目录：

"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"

对于某些构建工具，有预先存在的字体很棒的包。例如，webpack有font-awesome-webpack，可以让您简单require('font-awesome-webpack')。

Answer 4

在我的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');

Answer 5

您可以在<head></head>标记之间添加它，如下所示：

<head>
  <link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>

或者您node_modules的路径是什么。

编辑（2017-06-26） - 免责声明：在这个原始答案的时候，好的工具并不普遍。使用当前的构建工具（如webpack或browserify），使用此答案可能没有意义。我可以删除它，但我认为重要的是突出显示各种选项以及可能的dos和not nots。

Answer 6

使用expressjs，将其公开：

app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));

您可以在yourdomain.com/stylesheets/fontawesome/css/all.min.css

上看到它

Answer 7

使用webpack和scss：

使用npm安装真棒字体（使用https://fontawesome.com/how-to-use上的设置说明）

npm install @fortawesome/fontawesome-free

接下来，使用 copy-webpack-plugin 将 webfonts 文件夹从 node_modules 复制到您的 dist Webpack构建过程中的文件夹。（https://github.com/webpack-contrib/copy-webpack-plugin）

npm install copy-webpack-plugin

在 webpack.config.js 中，配置 copy-webpack-plugin 。注意：默认的webpack 4 dist文件夹是“ dist”，因此我们将webfonts文件夹从node_modules复制到dist文件夹。

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            { from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
        ])
    ]
}

最后，在您的 main.scss 文件中，告诉fontawesome webfonts 文件夹已复制到的位置，并从 node_modules导入所需的SCSS文件。

$fa-font-path: "/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";

Answer 8

如果您使用的是npm，则可以使用Gulp.js一个构建工具从SCSS或LESS构建您的Font Awesome软件包。此示例将从SCSS编译代码。

在本地安装Gulp.js v4，在全局安装CLI V2。
使用npm安装名为gulp-sass的插件。

在公用文件夹中创建一个main.scss文件，并使用以下代码：

$fa-font-path: "../webfonts";
@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/regular";
@import "fontawesome/solid";
@import "fontawesome/v4-shims";

在您的应用目录中创建一个gulpfile.js并将其复制。

const { src, dest, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const fs = require('fs');

function copyFontAwesomeSCSS() {
   return src('node_modules/@fortawesome/fontawesome-free/scss/*.scss')
     .pipe(dest('public/scss/fontawesome'));
}

function copyFontAwesomeFonts() {
   return src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
     .pipe(dest('public/dist/webfonts'));
 }

 function compileSCSS() { 
   return src('./public/scss/theme.scss')
     .pipe(sass()).pipe(dest('public/css'));
 }

 // Series completes tasks sequentially and parallel completes them asynchronously
 exports.build = parallel(
   copyFontAwesomeFonts,
   series(copyFontAwesomeSCSS, compileSCSS)
 );

在命令行中运行“ gulp build”并观看魔术。

Answer 9

由于我当前正在学习node js，所以我也遇到了这个问题。我要做的就是，首先，使用npm安装字体真棒

npm install font-awesome --save-dev

在那之后，我为css和字体设置了一个静态文件夹：

app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));

和html中的

<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">

效果很好！

Answer 10

我遇到这个问题时也遇到了类似的问题，并认为我会分享另一个解决方案：

如果要创建Javascript应用程序，还可以通过Javascript直接引用字体超赞的图标：

首先，执行this guide中的步骤：

npm install @fortawesome/fontawesome-svg-core

然后在您的JavaScript中：

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })

完成上述步骤后，您可以使用以下方法将图标插入HTML节点内：

htmlNode.appendChild(fontIcon.node[0]);

您还可以通过以下方式访问代表图标的HTML字符串：

fontIcon.html

Answer 11

SASS模块版本

很快，在@import中使用sass会被贬值。 SASS模块configuration改为使用@use。

@use "../node_modules/font-awesome/scss/font-awesome"  with (
  $fa-font-path: "../icons"
);

.icon-user {
  @extend .fa;
  @extend .fa-user;
}

如何使用node-modules中的font-awesome图标

11 个答案:

MY-style.scss