IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

inputボタンにアイコンフォントを表示する方法

inputフィールドに表示する文字列はvalueにセットするわけですが、FontAwesomeのiタグをvalue値にセットすることはできません。でも、検索フォームなどのボタンに『検索』という文字を表示するのではなく、FontAwesomeの虫眼鏡アイコンを表示したいときがあります。
その方法のメモです。

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

inputのフォントをCSSでFontAwesomeに指定する

かなり簡単。ただ、cssでinputのfont-familyにFontAwesomeを指定するだけです。そして、HTMLではiタグではなくUnicodeを指定します。
こんな感じ。

CSS

input[type=submit] {
  font-family: FontAwesome;
}

HTML

<input type="submit" value="&#xf002;">