如何使用Webpack Encore将Fontawesome 5添加到Symfony 4 [英] How to add Fontawesome 5 to Symfony 4 using Webpack Encore

问题描述

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

I want to add Font Awesome 5 to my Symfony 4 project, this is what I did :

• 我使用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

• I added font awesome to my project using yarn : yarn add --dev @fortawesome/fontawesome-free
• I imported font awesome in my main scss file (assets/css/app.scss) : @import '~@fortawesome/fontawesome-free/scss/fontawesome';
• my webpack encore configuration include my scss and js files : .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss')
• I compiled : ./node_modules/.bin/encore dev

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

Everything seems ok, but when I try to use font awesome in my view I only get a square icon instead. The generated app.css file seems ok as I can see the font awesome icons definitions, for example :

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

似乎只是缺少了内容"部分，我想是因为未加载字体...我是否需要添加一些内容来加载webfonts?我试图在我的app.js资产文件中添加很棒的js字体，但它没有任何改变. 我还尝试将自定义加载程序添加到我的Webpack Encore配置中(例如

It just seems that the 'content' part is missing, I guess because the fonts are not loaded... Do I need to add something to load the webfonts? I tried to add the font awesome js in my app.js asset file but it doesn't change anything. I also tried to add custom loaders to my webpack encore configuration (like this https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2) I also tried to clear the cache, same result...

有什么主意吗?

推荐答案

根据字体真棒文档

According font-awesome docs here, after install package

yarn add --dev @fortawesome/fontawesome-free

或

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

在您的配置文件(在我的情况下为和默认的Symfony 4位置)中要求字体真棒(assets/js/app.js)

Require font-awesome into your config file (in my case and default Symfony 4 location) assets/js/app.js:

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

再次编译yarn encore dev并出现图标.

这篇关于如何使用Webpack Encore将Fontawesome 5添加到Symfony 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！