ITコラム

jquery ui icon

jQuery

2018.05.25

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

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.