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配置（规则部分）：

   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相关的其他事情上花费的时间还多。

UPD我想我明白了。我发现我的公共路径是错误的，我的意思是webpack配置的这一部分：publicPath：'../static/fonts'-它当前指向我的html上一级的static / fonts文件夹。首先，相对路径本身是错误的，其次，相对路径不适用于其他文件夹，第三，我已将其更改为相对于根目录的相对路径：“ / static / fonts”，并且有效。

Answer 1

在我的项目（带有{strong> webpack 4 .26.1的HTML Starter）中，我通过两个变体添加了FontAwesome：

1

我只是installed FontAwesome免费（5.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'

源代码：https://github.com/cichy380/html-starter-bs4-webpack/blob/94865ac0b2283ee8cbd6df8b9b952a1eec8869fe/assets/index.js#L18-L22

提交：https://github.com/cichy380/html-starter-v2/commit/94865ac0b2283ee8cbd6df8b9b952a1eec8869fe

2。与API / SVG一起使用

我installed 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()

带有注释的源代码：https://github.com/cichy380/html-starter-bs4-webpack/blob/b97c1da4edb9ca96102bc9de7144255b1fa9fdfe/assets/scripts/vendor/fontawesome.js

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

Answer 3

这对我有用

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

在：app / javascript / packs / application.js

我的案例：Rails 6 webpacker宝石，webpack，纱线

通过yarn add @fortawesome/fontawesome-free

安装

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

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

这应该可以解决问题

Answer 5

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

我正在将字体很棒的all.js文件导入到我的index.js文件中：

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

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

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

Answer 6

只需将此文件导入您的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（）。

Answer 7

如果任何人都在寻找使用webpack在symfony 4+应用程序中实现超棒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';

如何使用Webpack使Font awesome 5发挥作用

7 个答案:

1

2。与API / SVG一起使用