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

  • 公開日:2017/2/25
  • 最終更新日:2017/2/23
この記事は最終更新日から2年以上が経過しています。

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;">