FontAwesomeのCDNを4系から5系にしたら表示されなくなりました

Question

初めてFontAwesomeを利用してます。
CDNを4から５にしたらアイコン（虫めがね）が表示されなくなりました。

元々

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<form method="get" action="#" class="search_container">
			    <input type="text" placeholder="何かお探しですか？">
			    <input type="submit" value="&#xf002" >
			</form>	

変更

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<form method="get" action="#" class="search_container">
			    <input type="text" placeholder="何かお探しですか？">
			    <input type="submit" value="&#xf002" >
			</form>	

###試したこと
valueのところを、
¥f002
など変えてみましたが同じでした。

どうすれば表示できるでしょうか？

分かる方教えて下さい。

###CSS追加
ご質問のおかげでfont-family:がバージョン４の指定だったと分かりました。
バージョン５の指定に変えてみました。

.search_container{
    position: relative;
    box-sizing: border-box;
    border: 2px solid #ddd;
    display: block;
    /* margin: 3px 10px; */
    border-radius: 3px;
    height: 2.3em;
    /* width: 265px; */
    width: 100%; 
    /* overflow: hidden; */
    background-color: #fff;
    input[type="text"]{
        width: 100%; 
        border: none;
        height: 2.0em; 
        padding-left: 10px;
        &:focus {
            box-shadow: 0 0 12px 0 rgba(255,153,0,1);
            border: 2px solid #FFF !important;
            outline: 0;
        }
    }
    input[type="submit"]{

        cursor: pointer;
        font-family: 'Font Awesome 5 Free';  /*バージョン４はFontAwesome;*/
        border: none;
        background: $mainColor2;
        color: #fff;
        position: absolute;
        width: 3.5em; 
        height: 2.05em; 
        /* width: 50px; */
        /* height: 41px; */
        right: 0px;
        top: 0;
        outline : none;
        text-align: center;
    }
}

ですが一色になってしまいました。

もう少し調べてみます。

Comments

[maisumakun]

Font Awesome本体以外に、当該ボタンへ適用しているCSSはありますか？

[Lhankor_Mhy]

CSSをご提示ください。

[m.ts10806]

ドキュメントも確認してください。
メジャーバージョンアップで仕様が変わるのはよくある事です。

[pecchan]

記載漏れ失礼しました。
CSS側追加します。
ご質問のおかげでで少し気づきました。

Answer 1

皆さんのおかげでヒントを得ることができ解決できました。
一人では無理でした。
有難う御座います！

変更した部分は以下の通りです。

html側
fasを追加

<input type="submit" value="&#xf002"> → <input type="submit" value="&#xf002" class="fas">

css側
バージョン５の指定に変更

font-family: FontAwesome → 'Font Awesome 5 Free';

Answer 2

以下のような指定では、いかがでしょうか。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<input type="submit" value="&#xf002" class="fas fa-search">

Comments

[pecchan]

有難う御座います！
虫めがね表示されましたが赤色でした。（白で表示したい）
CSS指定を忘れていたのでそちらを解消してみようと思います！
すいません、有難う御座います。

[_whitecat_22]

いえいえ、どういたしまして。
CSSも関係しますものね！
少しでもお役に立てならば幸いです。