[CSS]<input type=submit>にFontAwesomeのアイコンを表示する方法

CSS

2016.05.052017.04.12

フォームのサブミットボタンである<input type=”submit”>にFontAwesomeの虫眼鏡アイコンのフォントを使う方法のご紹介です。

FontAwesomeのアイコンフォントの表示例

CSSでinput[type=submit]にfont-family:FontAwesomeを指定した上で、

<style type="text/css">
input[type=submit]{
	font-family: FontAwesome
}
</style>

input[type=submit]{

font-family: FontAwesome

}

</style>

<input type=”submit”>のvalueの値にFontAwesomeの文字コードを指定します。

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

1	<input type="submit" value="">

文字コードについてはFontAwesomeのページのUnicodeで確認することができます。

※虫眼鏡アイコンでしたらf002などになります。

以下のようなボタンで表示されます。