jQuery fontIconPicker - Web Fontを使ったアイコンピッカー
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