inputにFontAwesomeを表示させたい

Question

前提・実現したいこと

検索窓の<input type="submit">にFontAwesomeを表示させたい。
検索窓のテキスト入力欄の横幅を長くしたい。

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

検索窓のfontawesomeが表示できず「□」のマークが出てくる。

テキスト入力欄の幅が変わらない

該当のソースコード

<form method="get" action="#" class="search_container">
    <input type="text" size="100" placeholder="記事を検索する">
    <input type="submit" value="&#xf002;">
</form>

css
form{
    margin: 100px auto;
}

.search_container{
    position: relative;
    box-sizing: border-box;
  }
  .search_container input[type="text"]{
    border: none;
    height: 1.8em;
    background: #f1f0f0;
    color: #241105;
    width: 100%;
  }
  .search_container input[type="text"]:focus {
    outline: 0;
  }
  .search_container{
    border: 2px solid #dea459;
    padding: 3px 5px;
    border-radius: 20px;
    height: 2.2em;
    width: 265px;
    overflow: hidden;
  }

  .search_container input[type="submit"]{
    cursor: pointer;
    font-family: Font Awesome;
    border: none;
    background: #dea459;
    color: #f1f0f0;
    position: absolute;
    width: 3.5em;
    height: 3.0em;
    right:0px;
    top: -5px;
    outline : none;
  }
  .search_container ::-webkit-input-placeholder {
    color: #241105;
  }

試したこと

fontawesomeの指定をheadに追記したのですが、表示されません。

HTMLのsizeの変更をしたけどサイズが変わりませんでした。CSSでwidthを指定しても変わりませんでした。

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

Answer 1

font-family: Font Awesome;

FontAwesome (空白なし)ではないでしょうか。