如何使用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 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 2

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

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

Answer 3

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

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 4

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

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

Answer 5

Giovani有权利。接下来你必须看一组图标。 font-awesome中的每个图标都有自己的组。如果你忘了这个，你会得到方形图标。

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

Answer 6

您需要安装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

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