laravel環境でfontawesome5の一部のアイコンが表示できず□になる

Question

前提・実現したいこと

laravelで作成中のサイトに、
fontawesomeを使ってアイコンを表示できるようにしたいです。

下記のコマンドでインストールしました。

$ npm install @fortawesome/fontawesome-free --save-dev 
$ npm install font-awesome-scss --save-dev

発生している問題・エラーメッセージ

一部のフォントだけがうまく表示できず
「□」のように出力されてしまいます。

該当のソースコード

<footer class="footer_design bg-dark">
    @guest
    <div style="margin-top:24px;">
        なんでも売ります<br>
        <p style="font-size:2.4em">{{ config('app.name', 'Laravel') }}</p><br>
    </div>
    <div><i class="fas fa-image"></i><i class="fab fa-cc-visa"></i></div>
    <p style="font-size:0.7em;">@copyright @mukae9</p>
</footer>

↓出力結果

<i class="fas fa-image"></i>は表示されるのに、
<i class="fab fa-cc-visa"></i>は□になります。

表示しようとしているアイコンはこれで、フリー版でも使えるとされています。
https://fontawesome.com/icons/cc-visa?style=brands
↓scssファイル

//アプリのディレクトリ\resources\sass\app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import 'style';

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

試したこと

fontowesomeのバージョンが本当に5であっているか、
アプリフォルダ\node_modules\@fortawesome\fontawesome-free\scss\fontawesome.scssを覗いて確認しました。

/*!
 * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@import 'variables';
@import 'mixins';
@import 'core';
@import 'larger';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';

5.15.2だと思います。

• npm run devコマンドによるCSSの反映
• ブラウザのキャッシュクリア

も試行済みです。

全部表示されないのであればまだわかるのですが、一部だけ表示されない理由がよくわからない状態です。
どなたか知恵を貸していただけないでしょうか。、

補足情報（FW/ツールのバージョンなど）

laravel6.0
fontawesome5.15.2

Answer 1

以下のようにbrands.scssも@importしてコンパイルし直すとどうでしょうか。

resources/sass/app.scss

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

Comments

[bokupiroki]

できました！

fontawesomeのアイコン詳細ページ（https://fontawesome.com/icons/cc-visa?style=brands
）左上に
Brands Style (fab)
と書いてありますね。

ここに書かれたスタイルをあらかじめインポートする必要があると
解釈しました。

ありがとうございます。

[Lulucom]

よかったです^ ^ 私も詳しくないですがそういうことだと思います。