Font Awesomeアイコンをinputのplaceholderで使う方法
Font Awesomeは便利ですよね。個人的にはデザインの観点よりも、ダウンロードフレンドリーな観点からよく使っています。
このFont Awesomeですが、inputタグのplaceholderで使う場合は、ちょっとコツが必要です。
当たり前ですが、次のように書いても動きません。
NG
|
1 |
<input type="text" class="" placeholder="<i class='fa fa-search'></i>調べたいキーワード"> |
まず、CSSを定義します。
|
1 2 3 4 5 6 |
input.font-awesome { font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } |
そうするとplaceholderでユニコードが使えるようになるので、次のよう書くことができます。
|
1 |
<input type="text" class="font-awesome" placeholder="調べたいキーワード"> |
各アイコンのユニコードは、Font Awesomeのアイコン詳細ページに記載されています。
