inputにFontAwesomeを表示させたい

前提・実現したいこと

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

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

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

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

該当のソースコード

HTML
1<form method="get" action="#" class="search_container">
2    <input type="text" size="100" placeholder="記事を検索する">
3    <input type="submit" value="&#xf002;">
4</form>
5
6css
7form{
8    margin: 100px auto;
9}
10
11.search_container{
12    position: relative;
13    box-sizing: border-box;
14  }
15  .search_container input[type="text"]{
16    border: none;
17    height: 1.8em;
18    background: #f1f0f0;
19    color: #241105;
20    width: 100%;
21  }
22  .search_container input[type="text"]:focus {
23    outline: 0;
24  }
25  .search_container{
26    border: 2px solid #dea459;
27    padding: 3px 5px;
28    border-radius: 20px;
29    height: 2.2em;
30    width: 265px;
31    overflow: hidden;
32  }
33
34  .search_container input[type="submit"]{
35    cursor: pointer;
36    font-family: Font Awesome;
37    border: none;
38    background: #dea459;
39    color: #f1f0f0;
40    position: absolute;
41    width: 3.5em;
42    height: 3.0em;
43    right:0px;
44    top: -5px;
45    outline : none;
46  }
47  .search_container ::-webkit-input-placeholder {
48    color: #241105;
49  }
50