制作のご相談はこちら
inputの検索ボタンをFont Awesome Iconsの虫眼鏡アイコンに変更する方法

2017年05月12日

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

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

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

Font Awesome Iconsでの出力方法

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

このままコードを入れてもうまく表示されない

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

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

解決方法

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

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