inputの検索ボタンをFont Awesome Iconsの虫眼鏡アイコンに変更する方法

この記事は2017年5月12日に書かれたもので、内容が古い可能性がありますのでご注意ください。

CMSなどを利用する際にデフォルトテンプレートの検索ボタンがテキストで「検索」となっていると分かりやすいっちゃ分かりやすいのですが、個人的には誰でも感覚的に識別できるユニバーサルデザインにしたいので、出来るだけ虫眼鏡アイコンに変更するようにしています。

私がいつも使用しているアイコンフォントはFont Awesome Iconsです。

Font Awesome Iconsでの出力方法

通常このアイコンを表示させる方法は下記のように記述すると表示されます。


<i class="fa fa-search" aria-hidden="true"></i>

inputの検索ボタンの場合は「検索」のテキストはvalueに入っています。


<input type="button" value="検索">

valueにそのままアイコンのコードを入れてもうまく表示されません。


<input type="button" value="<i class="fa fa-search" aria-hidden="true"></i>">

inputのfont-familyをFontAwesomeに変更し、valueにUnicodeの記述をするだけです。

Unicodeはこちらからご確認ください。


<style type="text/css">
input{
  font-family: FontAwesome;
}
</style>

<input type="button" value="">