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

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

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

NG

<input type="text" class="" placeholder="<i class='fa fa-search'></i>調べたいキーワード">

まず、CSSを定義します。

input.font-awesome {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

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

<input type="text" class="font-awesome" placeholder="&#xF002;調べたいキーワード">

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