web-dev-qa-db-ja.com

Webpack Encoreを使用してFontawesome 5をSymfony 4に追加する方法

Font Awesome 5をSymfony 4プロジェクトに追加したいのですが、これが私がやったことです。

  • Yarnを使用してプロジェクトに素晴らしいフォントを追加しました：_yarn add --dev @fortawesome/fontawesome-free_
  • メインscssファイル（assets/css/app.scss）にフォントawesomeをインポートしました：_@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";
}
_

フォントがロードされていないため、「コンテンツ」部分が欠落しているように見えます... Webフォントをロードするために何かを追加する必要がありますか？ app.jsアセットファイルにフォントawesome jsを追加しようとしましたが、何も変わりません。また、webpackアンコール構成にカスタムローダーを追加しようとしました（このように https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-forのように-webpack-2 ）キャッシュもクリアしようとしましたが、同じ結果になりました...

何か案が？

symfony4font-awesome-5webpack-encore
20
sylvain

Font-awesome docs here に従って、パッケージをインストールした後

yarn add --dev @fortawesome/fontawesome-free

または

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

設定ファイルにfont-awesomeを要求する（私の場合は、デフォルトのSymfony 4の場所）asset/js/app.js：

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

もう一度コンパイルyarn encore devとアイコンが表示されます。

18
Giovani

@import '〜@ fortawesome/fontawesome-free/scss/fontawesome'を追加します。十分ではありません。これらのファイルの1つ（または任意の組み合わせ）を追加する必要があります（ユースケースに応じて）

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

上記のような以下は私にとって完璧に機能します：

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'
    ]
}]
3
Jesse Quinn

私はあなたの問題の解決策を見つけたと思います、それはおそらく最良ではなく出発点です。 Font Awesome Documentation によると、all.cssをコードに追加する必要があります。または @fontface importsステートメントがあります。

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

2
Pouyan

ジョバニは正しい。次に、アイコンのグループを確認する必要があります。 font-awesomeのすべてのアイコンには独自のグループがあります。これを忘れると、代わりに正方形のアイコンが表示されます。

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