waka8*stakes

〜馬絵+林檎+Wordpress〜

input要素で書かれたボタンにアイコンフォントを書く方法

input_fontawesome

FontAwesome使い始めたし、検索フォームのボタンに『検索』の文字じゃなくて今風に虫眼鏡アイコン→を表示したくなりました。。

inputフィールドに好きな文字列を入れるにはvalue=”文字列”

一方FontAwesomeは<i class="fa fa-search"></i>と書けばFontAwesome用のCSSで表示してくれるようになってます。だからといって<input type="submit" value="<i class="fa fa-search"></i>">なんて、valueの値にHTMLタグを指定するなんて無茶な事できません。でもあきらめきれないので調べてみました。

inputのフォントをFontAwesomeに指定したら解決

javascriptとか要るのかと思ったら意外にも自分の知識の範囲内で出来る事でした。ただ単に、inputのsubmit属性のフォントをCSSでFontAwesomeに指定する。それだけでよかったんです。

以下のようにHTMLとCSSにちょっと手を加えるだけ。jsとか用意しなくていいので簡単に出来てよかった。

CSS

input[type=submit]{
font-family: FontAwesome /*FontAwesomeをフォント指定*/;
}

HTML

<input type="submit" value="&#xf002;">
<!-- fa-search の文字コード &#xf002; をvalueに入れる -->

FontAwesomeの文字コードは以下のサイトでで知る事ができます。

参考サイト