如何使用节点模块中的字体真棒图标答案

【问题标题】：How to use font-awesome icons from node-modules如何使用节点模块中的字体真棒图标
【发布时间】：2023-03-11 12:45:02
【问题描述】：

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

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

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

【问题讨论】：

你有没有想出“正确”的方法来做到这一点？我目前只是使用 gulp 任务将 node_modules 中的内容复制到我的公共目录中。
后来我用它作为bower组件...

标签： css node.js less npm font-awesome

【解决方案1】：

您必须设置正确的字体路径。例如

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

【讨论】：

sass 也是如此。路径../assets/font-awesome/fonts 为我工作。谢谢。

【解决方案2】：

您可以像这样在<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），使用此答案可能没有意义。我可以删除它，但我认为突出显示一个人拥有的各种选项以及可能的注意事项和注意事项非常重要。

【讨论】：

我认为没有人愿意在构建中包含 node_modules 目录并直接引用它。
我明白，但它仍然是一个选项。解决方案没有单一的答案。 :) 如果您有捆绑系统，那么您可以 @import '../node_modules/...' 就像其他答案所表明的那样。
与其他答案相比，我觉得这是最好的。您仍在其他答案中通过 node_modules 引用相对路径。如果 font-awesome 中的 css 文件的位置发生变化，则需要像其他答案一样进行调整或维护。不同之处在于这个答案不需要翻译或任务。它只是将导入准确地放置在预期的位置；在<link> 标签中。
一个简单的 npm forder 至少有 10+MB，任何用户都不会出于任何原因将这个权重添加到项目中。 npm 的全部意义在于在开发过程中提供帮助，并在构建后缩小/减少生产规模。即使它有效，也不要认为这是一个好的选择。 ; )
我添加了以下免责声明：在这个原始答案的时候，好的工具并不普遍。使用当前的构建工具（例如 webpack 或 browserify），使用此答案可能没有意义。我可以删除它，但我认为突出显示一个人拥有的各种选项以及可能的注意事项和注意事项非常重要。

【解决方案3】：

安装为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。

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

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

【讨论】：

需要更加强调的是，字体也需要提供给字体文件夹......我可能花了一个小时试图弄清楚这个简单的小东西。
您还可以通过将变量 fa-font-path 设置为您想要的位置来调整字体静态路径。
在上面的例子中，你需要在你的 less 导入之后使用以下覆盖，以便在部署后可以找到 gulp 复制的 font-awesome 字体文件：@fa-font-path: "/public/fonts";

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用 expressjs，将其公开：

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

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

【讨论】：

FontAwesome 建议将他们的 npm 包安装为devDependency。为了使该解决方案正常工作（在生产中），是否应将包安装为常规依赖项？
回答我自己的问题：是的，它需要安装--save 而不是--save-dev

【解决方案7】：

使用 webpack 和 scss：

使用 npm 安装 font-awesome（使用 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"; // 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 应用到 html 文档中要使用 fontawesome 图标的所需区域。

示例：

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

【讨论】：

对我来说很好，我只需要将路径从@import "../node_modules/[...]" 调整为@import "@/../node_modules/[...]"
你可以给 webpack.config.js 添加一个别名：resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}} 然后@import "node_modules/[...]

【解决方案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”并观看魔术。

【讨论】：

【解决方案9】：

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

如果您正在创建一个 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

【讨论】：

【解决方案10】：

由于我目前正在学习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">

而且效果很好！

【讨论】：

【解决方案11】：

SASS 模块版本

很快，在 sass 中使用 @import 将被贬值。 SASS 模块 configuration 使用 @use 代替。

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

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

【讨论】：