ホーム » jQuery UI の利用 » jQuery UI - アイコン
jQuery UI - アイコン
jQuery UI にはフレームワークアイコンとして、 そのテーマにあったアイコンが多数付属します。
jQuery UI のアイコンの使い方とその種類を紹介します。
開発のヒント: Font Awesome などの Free 版でもかなりカバーしますので、そちらも検討するのもおすすめです。
フレームワークアイコンの使い方
アイコンを利用するには、 ui-icon クラスとともに表示したいアイコンのクラスを指定します。 したの print アイコンでは ui-icon-print を指定しています。
<div><span class='ui-icon ui-icon-print'></span></div>
アイコンの種類
| カラット (carat) | |||
| ui-icon-carat-1-ne | ui-icon-carat-1-ne | ||
| ui-icon-carat-1-e | ui-icon-carat-1-se | ||
| ui-icon-carat-1-s | ui-icon-carat-1-sw | ||
| ui-icon-carat-1-w | ui-icon-carat-1-nw | ||
| ui-icon-carat-2-n-s | ui-icon-carat-2-e-w | ||
| 三角形 (triangle) | |||
| ui-icon-triangle-1-n | ui-icon-triangle-1-ne | ||
| ui-icon-triangle-1-e | ui-icon-triangle-1-se | ||
| ui-icon-triangle-1-s | ui-icon-triangle-1-sw | ||
| ui-icon-triangle-1-w | ui-icon-triangle-1-nw | ||
| ui-icon-triangle-2-n-s | ui-icon-triangle-2-e-w | ||
| 矢印 (arrow) | |||
| ui-icon-arrow-1-n | ui-icon-arrow-1-ne | ||
| ui-icon-arrow-1-e | ui-icon-arrow-1-se | ||
| ui-icon-arrow-1-s | ui-icon-arrow-1-sw | ||
| ui-icon-arrow-1-w | ui-icon-arrow-1-nw | ||
| ui-icon-arrow-2-n-s | ui-icon-arrow-2-ne-sw | ||
| ui-icon-arrow-2-e-w | ui-icon-arrow-2-se-nw | ||
| 矢印止め (arrowstop) | |||
| ui-icon-arrowstop-1-n | ui-icon-arrowstop-1-e | ||
| ui-icon-arrowstop-1-s | ui-icon-arrowstop-1-w | ||
| 太矢印 (arrowthick) | |||
| ui-icon-arrowthick-1-n | ui-icon-arrowthick-1-ne | ||
| ui-icon-arrowthick-1-e | ui-icon-arrowthick-1-se | ||
| ui-icon-arrowthick-1-s | ui-icon-arrowthick-1-sw | ||
| ui-icon-arrowthick-1-w | ui-icon-arrowthick-1-nw | ||
| ui-icon-arrowthick-2-n-s | ui-icon-arrowthick-2-ne-sw | ||
| ui-icon-arrowthick-2-e-w | ui-icon-arrowthick-2-se-nw | ||
| 太矢印止め (arrowthickstop) | |||
| ui-icon-arrowthickstop-1-n | ui-icon-arrowthickstop-1-e | ||
| ui-icon-arrowthickstop-1-s | ui-icon-arrowthickstop-1-w | ||
| 戻り矢印 (arrowreturn) | |||
| ui-icon-arrowreturn-1-w | ui-icon-arrowreturn-1-n | ||
| ui-icon-arrowreturn-1-e | ui-icon-arrowreturn-1-s | ||
| 太戻り矢印 (arrowreturnthick) | |||
| ui-icon-arrowreturnthick-1-w | ui-icon-arrowreturnthick-1-n | ||
| ui-icon-arrowreturnthick-1-e | ui-icon-arrowreturnthick-1-s | ||
| 更新矢印 (arrowrefresh) | |||
| ui-icon-arrowrefresh-1-w | ui-icon-arrowrefresh-1-n | ||
| ui-icon-arrowrefresh-1-e | ui-icon-arrowrefresh-1-s | ||
| 四方矢印 (arrow-4) | |||
| ui-icon-arrow-4 | ui-icon-arrow-4-diag | ||
| バッテリー (battery) | |||
| ui-icon-battery-0 | ui-icon-battery-1 | ||
| ui-icon-battery-2 | ui-icon-battery-3 | ||
| 円 (circle-4) | |||
| ui-icon-circle-plus | ui-icon-circle-minus | ||
| ui-icon-circle-close | ui-icon-circle-triangle-e | ||
| ui-icon-circle-triangle-s | ui-icon-circle-triangle-w | ||
| ui-icon-circle-triangle-n | ui-icon-circle-arrow-e | ||
| ui-icon-circle-arrow-s | ui-icon-circle-arrow-w | ||
| ui-icon-circle-arrow-n | ui-icon-circle-zoomin | ||
| ui-icon-circle-zoomout | ui-icon-circle-check | ||
| ui-icon-circlesmall-plus | ui-icon-circlesmall-minus | ||
| ui-icon-circlesmall-close | |||
| 四角 (square) | |||
| ui-icon-squaresmall-minus | ui-icon-squaresmall-close | ||
| ui-icon-squaresmall-plus | |||
| グリップ (grip) | |||
| ui-icon-grip-dotted-vertical | ui-icon-grip-dotted-horizontal | ||
| ui-icon-grip-solid-vertical | ui-icon-grip-solid-horizontal | ||
| ui-icon-gripsmall-diagonal-se | ui-icon-grip-diagonal-se | ||
| 転送 (transfer) | |||
| ui-icon-transferthick-e-w | ui-icon-folder-collapsed | ||
| ui-icon-transfer-e-w | |||
| ドキュメント (document) | |||
| ui-icon-document | ui-icon-document-b | ||
| メール (mail) | |||
| ui-icon-mail-closed | ui-icon-mail-open | ||
| ズーム (zoom) | |||
| ui-icon-zoomin | ui-icon-zoomout | ||
| ラジオボタン (radio) | |||
| ui-icon-radio-off | ui-icon-radio-on | ||
| ピン (pin) | |||
| ui-icon-pin-w | ui-icon-pin-s | ||
| メディア再生関連 | |||
| ui-icon-play | ui-icon-pause | ||
| ui-icon-seek-next | ui-icon-seek-prev | ||
| ui-icon-seek-end | ui-icon-seek-start | ||
| ui-icon-stop | ui-icon-eject | ||
| ui-icon-volume-off | ui-icon-volume-on | ||
| プラスとマイナス | |||
| ui-icon-plus | ui-icon-plusthick | ||
| ui-icon-minus | ui-icon-minusthick | ||
| 閉じる (close) | |||
| ui-icon-close | ui-icon-closethick | ||
| メッセージ | |||
| ui-icon-alert | ui-icon-info | ||
| ui-icon-notice | ui-icon-help | ||
| ui-icon-check | |||
| シグナル | |||
| ui-icon-signal-diag | ui-icon-signal | ||
| その他各種アイコン | |||
| ui-icon-extlink | 外部リンク | ||
| ui-icon-newwin | 新しいウィンドウ | ||
| ui-icon-refresh | 更新 | ||
| ui-icon-shuffle | シャッフル | ||
| ui-icon-folder-open | フォルダーを開く | ||
| ui-icon-note | メモ | ||
| ui-icon-suitcase | スーツケース | ||
| ui-icon-comment | コメント | ||
| ui-icon-person | 人 | ||
| ui-icon-print | 印刷 | ||
| ui-icon-trash | ごみ | ||
| ui-icon-locked | 施錠 - ロック | ||
| ui-icon-unlocked | 解錠 - アンロック | ||
| ui-icon-bookmark | お気に入り、ブックマーク | ||
| ui-icon-tag | タグ | ||
| ui-icon-home | ホーム | ||
| ui-icon-flag | フラグ | ||
| ui-icon-calendar | カレンダー | ||
| ui-icon-cart | カート | ||
| ui-icon-pencil | 鉛筆 | ||
| ui-icon-clock | 時計 | ||
| ui-icon-disk | ディスク | ||
| ui-icon-calculator | 計算機 | ||
| ui-icon-search | 検索 | ||
| ui-icon-wrench | レンチ | ||
| ui-icon-gear | ギア、歯車 | ||
| ui-icon-heart | ハート | ||
| ui-icon-star | 星、スター | ||
| ui-icon-link | リンク | ||
| ui-icon-cancel | キャンセル | ||
| ui-icon-key | キー、鍵 | ||
| ui-icon-lightbulb | 電球 | ||
| ui-icon-scissors | はさみ | ||
| ui-icon-clipboard | クリップボード | ||
| ui-icon-copy | コピー | ||
| ui-icon-contact | 連絡先、コンタクト | ||
| ui-icon-image | 画像 | ||
| ui-icon-video | ビデオ | ||
| ui-icon-script | スクリプト | ||
| ui-icon-bullet | 中黒、ビュレット | ||
| ui-icon-power | 電源 | ||
ホーム » jQuery UI の利用 » jQuery UI - アイコン