jQuery【 jQuery UI 】icon を使用してアイコンを表示する方法

colmun_main10284

jQuery UI の icon を利用すると、アイコンを表示することができます。
今回は、icon の使用方法について紹介します。

目次

 
1.icon を使用してアイコンを表示
2.icon のクラス一覧

1.icon を使用してアイコンを表示

 
jQuery UI を利用して アイコンを表示する場合は、次のような形で記述します。

<span class=”ui-icon 表示したいアイコンのクラス”></span>

ui-icon クラスと 表示したいアイコンのクラスを、スペース区切りで共に指定します。
 
ハサミのアイコン()は「 ui-icon-scissors 」クラスですので、 ハサミのアイコンを表示するためのコードは次のようになります。(他のアイコンのクラス名は、次章をご覧下さい。)

<span class="ui-icon ui-icon-scissors"></span>

 
アイコンの表示位置が他のテキスト等からずれる場合には、次のように CSS で float を設定してみて下さい。

<style>
span.ui-icon {
  float: center;
}
</style>

▲目次へ戻る

 

2.icon のクラス一覧

 
jQuery UI で用意されているアイコン及びそのクラス名は 次の通りです。

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-w ui-icon-arrowreturnthick-1-n
ui-icon-arrowreturnthick-1-e ui-icon-arrowreturnthick-1-s
ui-icon-arrowreturn-1-w ui-icon-arrowreturn-1-n
ui-icon-arrowreturn-1-e ui-icon-arrowreturn-1-s
ui-icon-arrowrefresh-1-w ui-icon-arrowrefresh-1-n
ui-icon-arrowrefresh-1-e ui-icon-arrowrefresh-1-s
ui-icon-arrow-4 ui-icon-arrow-4-diag
ui-icon-extlink ui-icon-newwin
ui-icon-refresh ui-icon-shuffle
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-note ui-icon-mail-closed
ui-icon-mail-open 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-calculator ui-icon-cart
ui-icon-pencil ui-icon-clock
ui-icon-disk ui-icon-calendar
ui-icon-zoomin ui-icon-zoomout
ui-icon-search ui-icon-wrench
ui-icon-gear ui-icon-heart
ui-icon-star ui-icon-link
ui-icon-cancel ui-icon-plus
ui-icon-plusthick ui-icon-minus
ui-icon-minusthick ui-icon-close
ui-icon-closethick 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-alert ui-icon-info
ui-icon-notice ui-icon-help
ui-icon-check ui-icon-bullet
ui-icon-radio-off ui-icon-radio-on
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-first
ui-icon-stop ui-icon-eject
ui-icon-volume-off ui-icon-volume-on
ui-icon-power 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-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
ui-icon-squaresmall-plus ui-icon-squaresmall-minus
ui-icon-squaresmall-close ui-icon-grip-dotted-vertical
ui-icon-grip-solid-vertical ui-icon-grip-solid-horizontal
ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です