Web Fontを使ったフォントアイコンはデザイン上で色々な場面で使えますが、さらにユーザに選ばせたりする上でも便利な代物です。しかし元々はテキストであり、Web Fontが入っていないと豆腐になってしまうため、そのUIが問題になります。 そこで使ってみたいのがjQuery fontIconPickerです。ドロップダウン、入力によるフィルタリングまで使える選択ライブラリです。

jQuery fontIconPickerの使い方

ドロップダウンの一例。フォントアイコンが綺麗に並んでいます。

インクリメンタルに絞り込みができます。

カテゴリから絞り込むこともできます。

ダークテーマもあります。

HTMLでの記述は次のようになります。

<select id="myselect" name="myselect" class="myselect">
  <option value="">No icon</option>
  <option>icon-user</option>
    :
  <option>icon-thumbs-up-alt</option>
</select>
<!-- JavaScript -->
<script type="text/javascript">
  // Make sure to fire only when the DOM is ready
  jQuery(document).ready(function($) {
    $('#myselect').fontIconPicker(); // Load with default options
  });
</script>

画像のアップロードはできなくともフォントアイコンを使えば、これで十分な気がします。後は選択したアイコンを色やサイズを変えて格好よく表示すれば良いのではないでしょうか。

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

jQuery fontIconPicker - An elegant font icon picker written in jQuery micc83/fontIconPicker