Web Fontを使ったアイコン表示は幾つかありますが、基本はWebサイト上でアイコン代わりに使うことが多いと思います。もちろんそれでも有益ですが、もっと面白い使い方もできるのではないでしょうか。 今回はその一つとしてjQuery fontIconPickerを紹介します。フォームの入力項目としてWeb Fontを使うライブラリです。

こんな素敵な表現ができます。

jQuery fontIconPickerの使い方

一番基本的な使い方はドロップダウンだと思います。

<select id="myselect" name="myselect">
    <option value="">No icon</option>
    <option>icon-user</option>
    <option>icon-search</option>
    <option>icon-right-dir</option>
</select>

<script>
$('#myselect').fontIconPicker();

これで完了です。ドロップダウンを使ってアイコンを選択できるようになります。同様にテキストボックスも使えます。

<input type="text" name="mytext" id="mytext"/>
</script><script>
$('#mytext').fontIconPicker({
    source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
    emptyIcon: false,
    hasSearch: false
});
</script>

テキストボックスの場合。検索の有無も指定できます。

JSONを使って非同期にアイコンリストを取得できます。

アイコンセットの差し替えも。

アイコンセットを切り替えたところ。

イベントのハンドリングもできます。

検索はアイコン名で行います。

jQuery fontIconPickerはFirefox、Safari、Chrome、IE8以上で動作します。Web Fontを使ったアイコンをより活用するための手段として知っておきたいソフトウェアですね。

jQuery fontIconPickerはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

jQuery fontIconPicker micc83/fontIconPicker