Font Awesomeアイコンをinputのplaceholderで使う方法


Font Awesomeは便利ですよね。個人的にはデザインの観点よりも、ダウンロードフレンドリーな観点からよく使っています。

このFont Awesomeですが、inputタグのplaceholderで使う場合は、ちょっとコツが必要です。

当たり前ですが、次のように書いても動きません。

NG

 

まず、CSSを定義します。

そうするとplaceholderでユニコードが使えるようになるので、次のよう書くことができます。

 

各アイコンのユニコードは、Font Awesomeのアイコン詳細ページに記載されています。

jpg

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン