IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

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

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

1週間でLPICの基礎が学べる本 第2版

体系的に学ぶ 安全なWebアプリケーションの作り方[リフロー版] 脆弱性が生まれる原理と対策の実践

スッキリわかる SQL 入門 ドリル215問付き!

改訂 FuelPHP入門

はじめてのフレームワークとしてのFuelPHP 改訂版