フォームを送信する際にクリックする「サブミットボタン」にアイコンフォント「Font Awesome（Free版）」を使ってアイコンを表示させてみたいと思います。今回表示させたいアイコンは「 （虫眼鏡）」です。
Font Awesomeの仕様が変更になったため、記事の内容を更新しています（v5.0.4以上対応）。こちらから最新のCDNが取得できます。
input要素にアイコンを表示させる
サブミットボタンにアイコンを表示させるためには、「input」要素の「value」の値にアイコンのコード（Unicode）をセットします。アイコンのコードはFont Awesomeのページから取得できます。「value」の値にセットするときはコードの頭に「&#x」を、おしりに「;」を追加してください。虫眼鏡のアイコンなら「」になります。
次に「input」要素に「class="fas"」を追加します。「.fas」を追加すれば自分でCSSを書く必要はありません。「.fas」の部分はアイコン毎に違います。他には「.fa .fab .fal .far」というクラスがあります。
これでもうほとんど問題はないのですが、ブラウザによっては「検索」の文字が通常よりも太くなっているのがわかると思います。これは「.fas」に「font-weight:900」が設定されているためです。この「900」という値は勝手に変更するとアイコンが表示されなくなってしまいます。
<input type="submit" value=" 検索" class="fas">
button要素にアイコンを表示させる
文字の太さが気になる方は以下の方法をおすすめします。
意外と知られていないのが「button」要素でサブミットする方法です。ボタンの「type」属性に「submit」を指定する事で、普通のボタンがサブミットボタンになります。「<button></button>」の間にHTMLタグを書く事ができるので、通常の方法で簡単にアイコンを表示させる事ができます。
デザインのカスタマイズもしやすく、これが最適な方法だと思います。
<button type="submit"> <i class="fas fa-search"></i> 検索 </button>
アイコンを左に配置し、色を変えてみました。「input type="submit"」のときと違って「button type="submit"」の場合はこのように自由にデザインする事ができます。
<button type="submit" class="button1"> <i class="fas fa-search"></i>検索 </button>
.button1{
display:block;
position:relative;
}
.button1 i{
position:absolute;
top:50%;
left:10px;
margin-top:-0.5em;
color:#0070be;
}