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

Question

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

• 我使用yarn为我的项目添加了很棒的字体:yarn add --dev @fortawesome/fontawesome-free
• 我在我的主 scss 文件 (assets/css/app.scss) 中导入了 font Awesome:@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

一切看起来都不错，但是当我尝试在我的 View 中使用 font Awesome 时，我只得到一个方形图标。生成的 app.css 文件看起来没问题，因为我可以看到很棒的字体图标定义，例如:

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

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

有什么想法吗？

Answer 1

根据 font-awesome 文档 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并且应该会出现图标。