submitボタンのアイコンにアイコンフォント(Font Awesome)を使う

フォームを送信する際にクリックする「サブミットボタン」にアイコンフォント「Font Awesome」を使ってアイコンを表示させてみたいと思います。今回付けたいアイコンは「 (虫眼鏡)」です。

まず、positionを使ってボタンの上にアイコンを配置する方法を思いつきましたが、アイコンの上をクリックするとサブミットできません。さらに「検索」の文字の前に謎のスペースがある事にお気付きだろうか。全角スペースや半角スペースを使ってアイコン1個分の領域を確保しておき、そのスペースに配置する、いわゆる力技というやつです。

HTML
	<div class="button">
		<input type="submit" value="  検索">
		<i class="fa fa-search" aria-hidden="true"></i>
	</div>
CSS
.button{display:inline-block;position:relative;}
.button input[type=submit]{padding:10px 20px;font-size:16px;cursor:pointer;}
.button i{position:absolute;top:50%;left:50%;margin-top:-0.5em;margin-left:-1.5em;}

ボタンを装飾するCSSは以下省きます。

しかし、positionを使って配置する方法は、以下のプレビューのように、ある程度幅のあるボタンの左右にアイコンを配置する場合には有効な方法です。

次に、どこかの頭の良い人が考えた方法で、input要素のfont-familyに「FontAwesome」を指定して、valueの値にアイコンのコードを指定するという方法を試してみます(参考サイト)。

これでもうほとんど問題はないのですが、ブラウザによってはよく見るとアイコンが通常よりも太く(もしくは荒く)なっているのがおわかりでしょうか。これは「fa」というクラスがないためです。

HTML
<input type="submit" value="&#xf002; 検索">
CSS
input[type="submit"]{font-family:FontAwesome;}

そこでinput要素に「fa」というクラスを追加してみるとアイコンが通常通りの太さで表示されるようになりました。でも今度は「検索」の文字まで細くなってしまいました。

HTML
<input type="submit" class="fa" value="&#xf002; 検索">

そして最後に、これが一番適切ではないかという方法です。
意外と知られていないのが「button」要素でサブミットする方法で、「type」属性に「submit」を指定する事で、サブミットボタンになります。「<button></button>」の間にHTMLタグを書く事ができるので、簡単にアイコンを付ける事ができます。

HTML
<button type="submit">
	<i class="fa fa-search" aria-hidden="true"></i>
	検索
</button>

3つのパターンをボタンの背景を黒にして並べてみました。ブラウザによってはアイコンや文字の太さが違うのがわかると思います。

最終更新日:2017/03/02