フォームの送信ボタンのvalueはFontAwesomeのアイコンフォントも設置できる

フォームの送信ボタンは、valueにテキストを入力して使用するのが一般的です。typeをimageにして、送信ボタンを画像にすることもあります。この部分をFontAwesomeを用いてアイコンフォントを設置することも可能です。

頻出しそうなパターンとして、検索フォームの時に使用するボタンをテキストや画像ではなく、FontAwesomeの虫眼鏡アイコンを用いるパターンを例にします。

検索フォームの検索ボタンをFontAwesomeを使って虫眼鏡アイコンにする方法

サンプルページを表示

1.FontAwesomeを読み込む準備
方法としては2パターン。サイトからダウンロードしてサーバー内に置くか、cdnで読み込むか。
これはどちらでも問題ないです。cdnで読み込むほうが早いかなと思います。

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

2.valueの部分に使用したいアイコンのコードを埋める
フォントアイコンのコードはFontAwesomeのサイトで一覧から確認することができます。
http://fontawesome.io/cheatsheet/

<!--基本となるソース-->
<form>
    <input type="text" maxlength="100" placeholder="キーワードで検索">
    <input type="submit" class="icn_search" value="&#xf002;">
</form>

3.font-familyにFontAwesomeを設定する
FontAwesomeを読み込むように、対象のcssにfont-familyの記述を追加します。

.icn_search {
    font-family: FontAwesome;
}

サンプルページを表示

実際にやることはこんだけだったりします。
自分も調べてみるまで、value内にコードを書くだけでアイコンフォントが表示できるとは思っていませんでした。
これだけ簡単であれば、頻繁に使っていきたいですね。