FontAwesomeのplaceholder表示について

今回HTMLのplaceholderにFontAwesomeのアイコンを表示する方法を記事にしてみました。

FontAwesomeとはWebでよく使用されるアイコンをフォントとして扱うことができます。使い方はとても簡単で無料版も用意されており、必要なソース一式をFontAwesomeのサイトからダウンロードして利用する方法と、CDN経由で利用する方法が存在します。

FontAwesomeの通常の表示方法についてダウンロード版で解説します。

１）配置
上記ダウンロードが完了したら、FontAwesomeのcssとフォント一式を適宜必要な位置に配置します。

２）アイコンの選択
下記サイトから表示させたいアイコンを選択します。 fontawesome.com

※下記サイトでは日本語でアイコンを検索できてとても便利です。 search-fa.com

３）定義
通常表示する場合は、以下の様にHTML定義します。

<link rel="stylesheet" href="/css/font-awesome.min.css" type="text/css" media="all" />

<i class="fa fa-search">テキスト</i>
fa-search：虫眼鏡アイコン

FontAwesomeをHTMLのplaceholderで表示する場合、上記の様なタグは利用できません。そこでplaceholder内では以下の様にunicodeで定義する必要があります。

<input type="text" name="search" value="" placeholder="&#xf002; 検索内容を入力"  style="font-family: FontAwesome;" />
「&#xf002;」虫眼鏡アイコンのunicode表示

また、各アイコンのunicodeの確認は下記より行えます。 fontawesome.com

後、もう一点必要な定義としてstyleで「font-family: FontAwesome」を指定する必要があります。

以上で、placeholderにFontAwesomeのアイコンを表示することができますので良かったら活用してみて下さい。