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

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

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

<input type=&quot;submit&quot; value=&quot;検索&quot;>

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

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

CSS

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

HTML

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