Question

我尝试遵循有关Font Awesome的文档。我拥有专业版，并已为其配置NPM。我正在使用webpack进行编译，但实际上存在渲染问题。我在做什么错了？

这是我的app.js

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

library.add(fas, far, fal, fab);

我刚刚将以下FA图标转储到索引文件中

<i class="fas fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="far fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fal fa-question-circle"></i> <!-- light style of the question circle icon -->

<i class="fab fa-facebook"></i>        <!-- facebook brand icon-->
<i class="fab fa-facebook-f"></i>      <!-- facebook "f" brand icon-->

它似乎对图标没有任何作用，并且编译时没有任何错误。我在做什么错了？

Answer 1

无论如何我都不是Webpack专家，但是为了使Font Awesome能够正常工作，除了简单的导入外，还有更多的配置。

现在FA 5可能已经改变了，但是我希望这种方法仍然有效。

这篇文章很好地总结了它，并且与我当前的配置几乎相同：

Webpack 2 and Font-Awesome Icon Importing

该文章包含以下内容（以防链接失效）：

您需要一些先决条件：

df=pd.DataFrame({'date':[1,2,3,4,5,6],'ppt':[1.5,0,2.7,4.6,15.5,1.5],'fld':[0,1,0,0,1,1]})

date    ppt     fld
1       1.5     0
2       0.0     1
3       2.7     0
4       4.6     0
5       15.5    1
6       1.5     1

resample(df[df.fld==1], replace=True, n_samples=3, random_state=123)

date    ppt     fld
6       1.5     1
5       15.5    1
6       1.5     1

resample(df[df.fld==2], replace=True, n_samples=3, random_state=123)

"...ValueError: low >= high"

-save-dev

还有FA，您可能已经拥有：

npm install webpack file-loader css-loader sass-loader node-sass

**注意：您的路径可能与我的**不同

在我的Webpack模块规则中，我设置为将FA资产放到fonts目录中：

npm install font-awesome --save

设置好所有配置后，需要将FA导入到主样式表中

module: {
    rules: [{
            test: /\.(eot|ttf|otf)(\?.*)?$/,
            loader: 'file-loader',
            options: {
                limit: 10000,
                name: '[name].[ext]',
                outputPath: '/fonts/',    // where the fonts will go
                publicPath: '/assets'       // override the default path
            }
        }]

然后，当您运行Webpack构建时，应该会看到资产被拉入。

Answer 2

我发现加载svg-core是个问题。预期的行为是自动替换标签。由于我正在加载svg-core，因此autoReplaceSvg已禁用。

默认情况下，使用@ fortawesome / fontawesome-svg-core软件包会禁用autoReplaceSvg和observeMutations。

Font Awesome API -> Configuration

字体真棒Webpack导入不呈现图标

2 个答案: