如何使用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加装配置包括我的scss和js文件: .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss')
• 我编译: ./node_modules/.bin/encore dev

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

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

似乎缺少'内容'部分,我想是因为没有加载字体...我是否需要添加一些内容来加载webfonts？我试图在我的app.js资产文件中添加字体awesome js,但它不会改变任何东西.我还尝试在我的webpack加装配置中添加自定义加载器(如https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2)我也尝试清除缓存,结果相同......

任何的想法？

Answer 1

根据font-awesome docs 这里,安装包之后

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 2

我建议在 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会检测到他需要把字体复制到build中。这就是您需要指定确切文件的原因。

Answer 3

添加@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 4

上面的以下内容对我来说非常有效：

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 5

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

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