Laravel FormファサードのsubmitボタンにFont Awesomeを使いたい

Question

発生している問題

LaravelプロジェクトでFormファサードのsubmitボタンにFont Awesomeを使いたいのですが、
アイコンが表示されなかったり、アイコンは表示されても送信ボタンとして機能しなかったりと
エラーが出ているため、解決方法を教えていただきたいです。

＜前提条件＞
・Font Awesomeを使用せず、bootstrapのボタンを使用した場合は正常に機能。
・Font Awesomeは共通スタイルとして読み込み済み。bladeファイルのみ変更しました。
下記エラー②ではアイコン表示ができているので、Font Awesomeを読み込めてはいるようです。

エラー①：アイコンがエラーになる

Font Awesomeアイコンの代わりに、点線の丸の中に'!'と'?'が交互に表示される下記エラーアイコンが表示されます。
送信ボタンとしても機能していません。

good_button.blade.php

    <div>
        {{--Good済の場合はGood削除ボタンとBadボタン--}}
        {!! Form::open(['route' => ['user.cancel_good', $card->id], 'method' => 'delete']) !!}
            {!! Form::submit('', ['value' => "&#xf164;", 'class' => "fas"]) !!}
        {!! Form::close() !!}
    </div>
    <div>
        {!! Form::open(['route' => ['user.bad', $card->id]]) !!}
            {!! Form::submit('', ['value' => "&#xf165;", 'class' => "far"]) !!}
        {!! Form::close() !!}
    </div>

※参考URL：　https://www.tsukimi.net/submit-button_font-awesome.html

エラー②：アイコンは表示できるが送信ボタンとして機能しない

good_button.blade.php

    {{--Good済の場合はGood削除ボタンとBadボタン--}}
    <div>
        {!! Form::open(['route' => ['user.cancel_good', $card->id], 'method' => 'delete']) !!}
            {!! Form::submit('', ['class' => "fas fa-thumbs-up"]) !!}
        {!! Form::close() !!}
    </div>
    <div>
        {!! Form::open(['route' => ['user.bad', $card->id]]) !!}
            {!! Form::submit('', ['class' => "far fa-thumbs-down"]) !!}
        {!! Form::close() !!}
    </div>

初心者のため情報が不足しておりましたら申し訳ありません。
よろしくお願いいたします。

Comments

[m.ts10806]

ブラウザ「ソースを表示」で想定通りのhtmlが生成できているか確認しましたか？

[Rint]

今更すみません。
ソースを見ると<i class='fas fa-thumbs-up'></i>の代わりに
svg　> path タグと長文の属性値が入っていました。表示が遅いのはこのせいでしょうか。

[m.ts10806]

解決後の追加質問となると別途質問たてられた方が良いかと思います。

[Rint]

ありがとうございます。そうします。

Answer 1

思い通りに動かないことと、エラーは違います。

単純に

{!! Form::submit('', ['class' => "fas fa-thumbs-up"]) !!}

を

<button><i class='fas fa-thumbs-up'></i></button>

に変更すれば良いと思います

Comments

[Rint]

ご回答通りでできました。
ありがとうございました！