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


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

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

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

NG

 

まず、CSSを定義します。

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

 

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

jpg