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

Question

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

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

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

- Govan

---

你是否找到了做这件事的“正确”方法？我目前只是使用一个gulp任务将东西从node_modules复制到我的公共目录中。 - sjmeverett

我后来将它用作 bower 组件... - Govan

Answer 1

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

在你的开发less文件中，你可以导入整个font awesome 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-3k 行未压缩的 CSS。

你还需要从名为/fonts/的文件夹中提供字体本身。例如，你可以使用简单的 gulp 任务将它们复制到该文件夹中：

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

- Kevin Carmody

---

需要更加强调的是，字体文件也需要放置在一个字体文件夹中。我大概花了一个小时来尝试解决这个简单的小问题。 - Alex J

您可以通过将变量“fa-font-path”设置为所需位置来调整字体路径。 - Alexander Heimbuch

在上面的例子中，您需要使用以下覆盖来跟随较少的导入，以便gulp复制的font-awesome字体文件在部署后被找到：@fa-font-path: "/public/fonts"; - CAK2

Answer 2

您需要设置正确的字体路径。例如：

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

- Andreas Frische

---

对于Sass也是一样的。路径../assets/font-awesome/fonts适用于我。谢谢。 - Andrey

Answer 3

将以下代码添加到您的 .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');

- Ken

Answer 4

使用 webpack 和 scss：

使用 npm 安装 font-awesome（按照 https://fontawesome.com/how-to-use 上的设置说明）

npm install @fortawesome/fontawesome-free

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

npm install copy-webpack-plugin

在 webpack.config.js 中配置 copy-webpack-plugin。注意：默认的 webpack 4 dist 文件夹是 "dist"，因此我们将从 node_modules 复制 webfonts 文件夹到 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"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
@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"; // if you also want to use `fa v4`  like: `fa fa-address-book-o` 

并将以下font-family应用于您希望使用字体awesome图标的HTML文档中的所需区域。

示例：

 body {
      font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
      // font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
    }

- pawelglow

---

对我来说运行良好，我只需要将路径从@import "../node_modules/[...]"调整为@import "@/../node_modules/[...]"即可。 - mecograph

你可以在 webpack.config.js 中添加别名：resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}，然后使用 @import "node_modules/[...]"。 - Steven Almeroth

一些图标的步骤太多了，真是不可思议。无论如何，感谢您的回答。 - Bellu

Answer 5

作为构建流程的一部分，您需要复制这些文件。例如，您可以使用 npm postinstall 脚本将文件复制到正确的目录：

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

对于一些构建工具，已经有预设的font-awesome包。例如，webpack有 font-awesome-webpack ，它让你可以简单地 require('font-awesome-webpack')。

- Wilfred Hughes

Answer 6

使用ExpressJS，将它公开：

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

您可以在以下地址查看：yourdomain.com/stylesheets/fontawesome/css/all.min.css

。该地址与IT技术有关。

- Kimprosh

---

FontAwesome 建议将他们的 npm 包安装为 devDependency。为了使此解决方案在生产环境中工作，该包是否应该作为常规依赖项安装？ - John J. Camilleri

回答自己的问题：是的，它需要使用 --save 安装，而不是 --save-dev。 - John J. Camilleri

Answer 7

你可以将它添加到你的 <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，可能没有使用此答案的意义。我可以删除它，但我认为突出显示一个人所拥有的各种选择和可能的做与不做是很重要的。

- Con Antonakos

---

我认为没有人会想要在构建中包含node_modules目录并直接引用它。 - Fabian

我明白了，但这仍然是一个选项。对于解决方案，并没有单一的答案。如果你有一个捆绑系统，那么你可以像其他答案所指示的那样使用 @import '../node_modules/...'。 - Con Antonakos

与其他答案相比，我认为这是最好的。在其他答案中，您仍然通过node_modules引用相对路径。如果font-awesome中CSS文件的位置发生更改，则需要像其他答案一样进行调整或维护。不同之处在于，此答案不需要转译或任务。它只是将导入放置在应该期望的地方；在<link>标签中。 - northamerican

一个简单的npm文件夹最少也要有10+MB，没有用户会想因为任何原因把这个重量加到项目中。整个npm的意义在于在开发过程中提供帮助，并在构建后进行缩小/减小生产大小。即使它能工作，也不要认为这是一个好选择。;) - T04435

我添加了以下免责声明：在回答这个问题的时候，好用的工具并不是那么普及。如今有了像Webpack或Browserify这样的现代构建工具，使用这个答案可能就没有意义了。我可以删除它，但我认为强调各种选项和可能的要点和注意事项很重要。 - Con Antonakos

Answer 8

由于我目前正在学习node js，我也遇到了这个问题。我所做的是，首先使用npm安装font-awesome。

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">

它正常运行！

- alvinsandwich

Answer 9

我发现这个问题与我遇到的类似，所以想分享另一个解决方案：

如果你正在创建一个Javascript应用程序，可以直接通过Javascript引用Font Awesome图标：

首先，请按照此指南中的步骤操作：

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

- jrook

Answer 10

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

1. Install Gulp.js v4 locally and CLI V2 globally.

2. Install a plugin called gulp-sass using npm.

3. Create a main.scss file in your public folder and use this code:

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

4. Create a gulpfile.js in your app directory and copy this.

   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)
    );
   

5. Run 'gulp build' in your command line and watch the magic.

- wattry