如何在Webpack中使用Font Awesome 5

Question

我正在尝试在我的Flask/webpack项目中使用Fontawesome。

最疯狂的事情是有一段时间它能够工作，然后就停止了。我改了一些愚蠢的东西，它又开始工作了，但最终完全停止了。

我所拥有的:

包配置：

  "devDependencies": {
        ...
        "css-loader": "^1.0.0",
        "node-sass": "^4.9.3",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "webpack": "^4.19.0",
        "webpack-cli": "^3.1.0",
        "webpack-merge": "^4.1.4"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.3.1",
        "bootstrap": "^4.1.3",
         ...
    }

webpack 配置文件（rules 部分）：

   test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
            name: '[name].[ext]',
            outputPath: '../fonts/',  
            publicPath: '../static/fonts' 
            }
        }]
    },
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    },
    {
        test: /\.scss$/,
        use: [
            "style-loader", 
            "css-loader", 
            "sass-loader" 
        ]
    },

Webpack，入口部分：

entry: {
        myStyles: './stles/myStyles.js'
    },

myStyles.js:

import fontawesome from "@fortawesome/fontawesome-free/scss/fontawesome.scss";
import regular from "@fortawesome/fontawesome-free/scss/regular.scss";
import solid from "@fortawesome/fontawesome-free/scss/solid.scss";
import brands from "@fortawesome/fontawesome-free/scss/brands.scss";

fontawesome.library.add(solid, regular, brands) 

然而，最后一行导致了Chrome的错误：

Uncaught TypeError: Cannot read property 'add' of undefined

我也尝试将导入语句添加到我的入口scss文件中，一开始它起作用了，但后来就停止了：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

所以，在我的模板中，最后有：

<i class="fas fa-user-circle fa-fw"></i>

我看到的只有方块。

我检查了Chrome，字体已加载（ttf、woff、woff2）。

请帮忙。我已经浪费了超过6个小时来解决这个问题，这比我花在与webpack相关的任何其他事情上的时间都要长。

更新 我想我找到问题了。我发现我的公共路径是错误的，我的意思是webpack配置的这部分：publicPath: '../static/fonts' - 它目前指向从我的html文件夹上一级的static/fonts文件夹。首先，相对路径本身就是错误的，其次，相对路径对于其他文件夹也无效，第三，我将其更改为相对于根目录的路径：'/static/fonts'，然后它就可以工作了。

- mimic

---

你找到任何使用scss导入的解决方案了吗？ - white_gecko

@white_gecko，我的路径有误，请查看问题的更新。 - mimic

关于不一致的“它工作了”和“它停止工作”的行为：我不得不使用yarn build而不是yarn dev来调试我的font-awesome / webpack-loaders问题。 - kca

你是否已经成功地在Webpack 5中使用资产模块使其工作了？ - apflieger

Answer 1

在我的项目(HTML起步版 with webpack 4.26.1)中，我通过两种方式添加了FontAwesome:

1. 安装和添加

我只是安装了FontAwesome Free (v5.5.0)

npm install --save-dev @fortawesome/fontawesome-free

我添加到 index.js

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

源代码 / 提交

2. 与 API / SVG 一起使用

我安装了FontAwesome（svg-core，brands-icons，regular-icons，solid-icons）

npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

我添加了一个JS文件

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab) 

dom.i2svg() 

源代码及注释 / 提交记录

- Cichy

---

如果您使用Vue，那么您需要使用“vue-fontawesome”，因为基础库以一种不受Vue支持的方式修改DOM。 - Nathan Goings

太好了 - 我只需要第一步。 - obrienk

如果您正在使用FontAwesome5，则以下是在app.js中使用的导入方式：import '@fortawesome/fontawesome-pro/css/all.css' - Kevin Katzke

关于第一个变量，import '@fortawesome/fontawesome-free/js/all' 在我的情况下同样适用。 - Marcus Junius Brutus

使用API，如何只安装一些图标以避免大包？ - João Pimentel Ferreira

Answer 2

这是对我有效的方法。

摘自用户@ahbou在webpacker问题页面上https://github.com/rails/webpacker/issues/619#issuecomment-430644035

在您的控制台上执行

yarn add @fortawesome/fontawesome-free

在你的 .scss 文件内部

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

- Oliv312

---

这对我非常有效。这种方法比通过JS导入更简单，而且似乎是正确的选择，因为这些包仅仅是SCSS...(顺便说一下，如果你使用npm而不是yarn，你需要运行npm install而不是yarn add)。 - rinogo

Answer 3

这对我起作用了

import "@fortawesome/fontawesome-free/js/all.js";
import "@fortawesome/fontawesome-free/css/all.css";

在：app/javascript/packs/application.js

我的情况：Rails 6 webpacker gem，webpack，yarn

通过yarn add @fortawesome/fontawesome-free安装

来自https://github.com/rails/webpacker/issues/619#issuecomment-590454028

- equivalent8

Answer 4

首先安装以下内容：

npm install file-loader @fortawesome/fontawesome-free --save

然后在 webpack.config.js 中添加

{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  loader: "file-loader",
  options: {
    outputPath: "../fonts",
  }
}

最终，

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

这应该能解决问题

- Hari Roshan

---

是的，你可能需要一个文件加载器！我也需要为SVG添加一个。 - asdf

在 node_modules 目录前加上 ~，这个方法有效。 - Trip

Answer 5

只需在您的myStyle.js文件中导入此文件。

import '@fortawesome/fontawesome-free/js/all'

或者你可以仅导入特定大小的图标

import '@fortawesome/fontawesome-free/js/light'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/brands'

我认为不需要使用fontawesome.library.add()。

- ru10

Answer 6

我正在使用专业版，它在使用上基本相同，名称结尾为“-pro”，而不是“-free”。

我将字体awesome all.js文件导入我的index.js文件中：

import '@fortawesome/fontawesome-pro/js/all.js'

然后将CSS文件导入到我的index.scss文件中：

@import '~@fortawesome/fontawesome-pro/css/all.css';

- Stan Wiechers

---

我的.scss导入不需要使用~，但除此之外一切都很完美。 - t56k

Answer 7

如果有人在使用webpack的Symfony 4+应用程序中实现font awesome 5（fa5）的解决方案时遇到问题，那么解决方案与先前提到的其他解决方案相同。

首先，您需要安装fontawesome。在终端上运行 yarn add @fortawesome/fontawesome-free。

然后，在您的app.js文件中简单地要求all.css和all.js。如果不清楚我在这里指的是哪个app.js文件，您可以在app-root/assets/js目录中找到app.js文件。 import '@fortawesome/fontawesome-free/js/all.js'; import '@fortawesome/fontawesome-free/css/all.css';

- sylvery