如何使用 Webpack Encore 将 Fontawesome 5 添加到 Symfony 4

Question

我想将 Font Awesome 5 添加到我的 Symfony 4 项目中，这就是我所做的：

• 我使用 yarn 为我的项目添加了很棒的字体：yarn add --dev @fortawesome/fontawesome-free
• 我在我的主 scss 文件 (assets/css/app.scss) 中导入了很棒的字体： @import '~@fortawesome/fontawesome-free/scss/fontawesome';
• 我的 webpack encore 配置包括我的 scss 和 js 文件： .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss')
• 我编译： ./node_modules/.bin/encore dev

一切似乎都很好，但是当我尝试在我的视图中使用 font awesome 时，我只得到一个方形图标。生成的 app.css 文件似乎没问题，因为我可以看到字体很棒的图标定义，例如：

.fa-sign-out-alt:before {
    content: "\F2F5";
}

似乎缺少“内容”部分，我猜是因为没有加载字体...我需要添加一些东西来加载网络字体吗？我试图在我的 app.js 资产文件中添加字体真棒 js，但它没有改变任何东西。 我还尝试将自定义加载器添加到我的 webpack encore 配置中（例如 https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2） 我也试过清除缓存，同样的结果...

有什么想法吗？

Answer 1

我想我找到了解决您问题的方法，这可能不是最好的，而是一个起点。根据Font Awesome Documentation，您应该将 all.css 添加到您的代码中。或者那里的@fontface imports 语句。

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

Answer 2

添加@import '~@fortawesome/fontawesome-free/scss/fontawesome';是不足够的。您需要添加这些文件中的一个（或任意组合）（取决于您的用例）

@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

Answer 3

根据font-awesome docs here，安装包后

yarn add --dev @fortawesome/fontawesome-free

或

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

在你的配置文件中需要 font-awesome（在我的例子中是默认的 Symfony 4 位置）assets/js/app.js：

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

再次编译yarn encore dev，应该会出现图标。

Answer 4

您需要安装 copy-webpack-plugin，请按照以下说明操作，它会为您工作 1-安装插件

yarn add copy-webpack-plugin --dev

2 将以下行添加到您的 webpack.config.js：

const CopyWebpackPlugin = require('copy-webpack-plugin');

3：编译

yarn run encore dev

再次测试页面，它现在应该会显示丢失的图标

Answer 5

上面的以下内容对我来说非常适合：

npm install @fortawesome/fontawesome-free @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons -D

将以下内容添加到 .scss 文件中

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

适用于 webpack 4

{
    test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    use: 'url-loader?limit=10000',
},
{
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: 'file-loader',
},
{
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
        'file-loader?name=images/[name].[ext]',
        'image-webpack-loader?bypassOnDebug'
    ]
}]

Answer 6

乔瓦尼是对的。 接下来，您必须查看一组图标。 font-awesome 中的每个图标都有自己的组。如果你忘记了这一点，你会得到方形图标。

<i class="fab fa-accusoft"></i>
<i class="fas fa-address-book"></i>

Answer 7

我建议在 Symfonycast 上查看此视频以了解发生了什么。 （仅供参考：Ryan Weaver视频作者也是Encore的主要开发者）。

https://symfonycasts.com/screencast/webpack-encore/css

font-awesome 部分从 4:00 开始。

简而言之：

字体真棒 v4 ：

yarn add font-awesome --dev

然后在你的 .css 文件中

@import '~font-awesome';

字体很棒的 v5：

yarn add --dev @fortawesome/fontawesome-free

然后在你的 .css 文件中

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

您可能会问为什么@import '~@fortawesome/fontawesome-free'; 不起作用？ 因为快捷方式语法检查 @fortawesome package.json 文件的 'style' 键。

目前我们有

  "style": "css/fontawesome.css",

Webpack 将在你的 css 中包含 fontawesome.css，但不会从 webfont 目录中包含任何内容。这就是为什么你会看到黑色方块。字体不在这里，因为在 fontawesome.css 中从未提及字体目录的路径。因此 Webpack 不会将字体目录复制到您的构建中。 但是如果你查看 all.css 你会发现像这样的东西

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

所以 webpack 会检测到他需要将字体复制到构建中。这就是您需要指定确切文件的原因。