• twitter
  • Facebook
  • はてなブックマーク
2012年06月11日(月)

[jQueryUI] アイコンクラス一覧表

jQueryUIで使えるアイコンクラスの一覧表です。アイコン画像は、サードパーティ製のものを使う事も出来ます。サードパーティ製のアイコンを使う際は、アイコンに対応したスタイルシートなどを用意して、ui-icon-●●●によって変更できるようにする必要があります。

基本的なアイコンの配置

アイコン画像は、ウィジットのクリックエリアとして使用されるli要素見出し(h1~h6)の中に、空のspanタグなどを記述し、ui-iconui-icon-アイコンの種類というクラス名を使って設定出来ます。デフォルトでは横並びに配置されていないので、自分でスタイルシートを調整してfloatを行います(display:blockが設定されているため)。各アイコンのサイズは16×16pxです。

ウィジットにアイコンを追加

  1. <div class="ui-widget ui-helper-clearfix ui-●●●">
  2. <h3 class="ui-●●●-header ui-state-default ui-helper-reset ui-corner-all">
  3. <span class="ui-icon ui-icon-○○○"></span>見出し文字列など
  4. </h3>
  5. </div>
  • カラット(矩形)方角アイコン
  •  ui-icon-carat-1-n
  •  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
  • 三角形方角アイコン
  •  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
  • 矢印方角アイコン
  •  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
  • 停止矢印方角アイコン
  •  ui-icon-arrowstop-1-n
  •  ui-icon-arrowstop-1-e
  •  ui-icon-arrowstop-1-s
  •  ui-icon-arrowstop-1-w
  • 矢印方角アイコン(太字)
  •  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
  • 停止矢印方角アイコン(太字)
  •  ui-icon-arrowthickstop-1-n
  •  ui-icon-arrowthickstop-1-e
  •  ui-icon-arrowthickstop-1-s
  •  ui-icon-arrowthickstop-1-w
  • リターン矢印方角アイコン(太字)
  •  ui-icon-arrowreturnthick-1-n
  •  ui-icon-arrowreturnthick-1-e
  •  ui-icon-arrowreturnthick-1-s
  •  ui-icon-arrowreturnthick-1-w
  • リターン矢印方角アイコン
  •  ui-icon-arrowreturn-1-n
  •  ui-icon-arrowreturn-1-e
  •  ui-icon-arrowreturn-1-s
  •  ui-icon-arrowreturn-1-w
  • リフレッシュ矢印方角アイコン
  •  ui-icon-arrowrefresh-1-n
  •  ui-icon-arrowrefresh-1-e
  •  ui-icon-arrowrefresh-1-s
  •  ui-icon-arrowrefresh-1-w
  • 四方向方角アイコン
  •  ui-icon-arrow-4
  •  ui-icon-arrow-4-diag
  • オフィス系アイコン
  •  ui-icon-suitcase
  •  ui-icon-note
  •  ui-icon-calculator
  •  ui-icon-clock
  •  ui-icon-pencil
  •  ui-icon-disk
  •  ui-icon-calendar
  • wysywig系アイコン
  •  ui-icon-newwin
  •  ui-icon-transfer-e-w
  •  ui-icon-transferthick-e-w
  •  ui-icon-folder-collapsed
  •  ui-icon-folder-open
  •  ui-icon-document
  •  ui-icon-document-b
  •  ui-icon-print
  •  ui-icon-trash
  •  ui-icon-clipboard
  •  ui-icon-copy
  •  ui-icon-image
  •  ui-icon-script
  •  ui-icon-scissors
  • フォーム系アイコン
  •  ui-icon-mail-closed
  •  ui-icon-mail-open
  •  ui-icon-comment
  •  ui-icon-person
  •  ui-icon-search
  •  ui-icon-contact
  • リンクボタン系アイコン
  •  ui-icon-link
  •  ui-icon-extlink
  •  ui-icon-cancel
  •  ui-icon-cart
  •  ui-icon-bookmark
  •  ui-icon-tag
  •  ui-icon-home
  •  ui-icon-zoomin
  •  ui-icon-zoomout
  •  ui-icon-circle-zoomin
  •  ui-icon-circle-zoomout
  • ボタン・ダイアログ向きアイコン
  •  ui-icon-plus
  •  ui-icon-plusthick
  •  ui-icon-minus
  •  ui-icon-minusthick
  •  ui-icon-close
  •  ui-icon-closethick
  •  ui-icon-alert
  •  ui-icon-info
  •  ui-icon-notice
  •  ui-icon-help
  •  ui-icon-check
  •  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-check
  •  ui-icon-circlesmall-plus
  •  ui-icon-circlesmall-minus
  •  ui-icon-circlesmall-close
  •  ui-icon-squaresmall-plus
  •  ui-icon-squaresmall-minus
  •  ui-icon-squaresmall-close
  • メディアコントロール系アイコン
  •  ui-icon-video
  •  ui-icon-radio-off
  •  ui-icon-radio-on
  •  ui-icon-play
  •  ui-icon-pause
  •  ui-icon-seek-next
  •  ui-icon-seek-prev
  •  ui-icon-seek-end
  •  ui-icon-seek-first
  •  ui-icon-stop
  •  ui-icon-eject
  •  ui-icon-volume-off
  •  ui-icon-volume-on
  •  ui-icon-power
  •  ui-icon-refresh
  •  ui-icon-shuffle
  • マップ(地図)系のアイコン
  •  ui-icon-flag
  •  ui-icon-pin-w
  •  ui-icon-pin-s
  • モバイル端末系のアイコン
  •  ui-icon-signal-diag
  •  ui-icon-signal
  •  ui-icon-battery-0
  •  ui-icon-battery-1
  •  ui-icon-battery-2
  •  ui-icon-battery-3
  • グリップアイコン
  •  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
  • その他のアイコン
  •  ui-icon-locked
  •  ui-icon-unlocked
  •  ui-icon-wrench
  •  ui-icon-gear
  •  ui-icon-heart
  •  ui-icon-star
  •  ui-icon-key
  •  ui-icon-lightbulb
  •  ui-icon-bullet

関連投稿記事

Comment: