inputボタンにアイコンフォントを表示する方法
- 公開日:2017/2/25
この記事は最終更新日から7年以上が経過しています。
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="">