我正在尝试在我的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 config (规则部分(：
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"
]
},
网络包，入口部分：
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 相关的任何其他事情上的时间还要多。
UPD 我想我想通了。我发现我的公共路径是错误的，我的意思是 webpack 配置的这一部分：publicPath：'../static/fonts' - 它目前指向距离我的HTML上一级的static/fonts文件夹。首先，相对路径本身是错误的，其次，相对路径不适用于其他文件夹，第三，我已将其更改为相对于根的相对："/static/fonts"并且它起作用了。
在我的项目(HTML Starter withwebpack4.26.1(中，我通过两个变体添加了FontAwesome：
1. 安装和添加
我刚刚安装了字体真棒免费 (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'
源代码/提交
阿拉伯数字。与 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()
带有注释/提交的源代码
这就是对我有用的。
取自用户@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';
这对我有用
import "@fortawesome/fontawesome-free/js/all.js";
import "@fortawesome/fontawesome-free/css/all.css";
在： app/javascript/packs/application.js
我的案例： 轨道 6 网络包装机宝石， 网络包装， 纱线
通过yarn add @fortawesome/fontawesome-free安装
与 https://github.com/rails/webpacker/issues/619#issuecomment-590454028 相比
首先安装以下内容，
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';
这应该可以解决问题
只需在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((。
我使用的是pro版本，它在用法方面基本相同，名称的结尾是"-pro"而不是"-free"。
我正在将字体真棒所有.js文件导入到我的索引.js文件中：
import '@fortawesome/fontawesome-pro/js/all.js'
并将 css 导入我的 index.scss 文件：
@import '~@fortawesome/fontawesome-pro/css/all.css';
如果有人来寻找使用 webpack 在 symfony 4+ 应用程序中实现字体真棒 5 (fa5( 的解决方案，该解决方案与之前提到的其他人相同。
所以首先你必须安装fontawesome。跑yarn add @fortawesome/fontawesome-free在您的终端上。
然后，您只需在应用程序.js文件中.css和所有.js都需要所有。如果不清楚我在这里指的是哪个应用程序.js文件，您可以在app-root/assets/js目录中找到应用程序.js文件。
import '@fortawesome/fontawesome-free/js/all.js';
import '@fortawesome/fontawesome-free/css/all.css';