jQuery UI のウェブアイコン（Icons）を紹介
jQuery UI のウェブアイコン（Icons）を紹介
今回はjQuery UIで利用できるアイコン（Icons）を紹介したいと思います。
インストール方法
まずは、インストール方法です。
以下のようにCSSファイルを読み込めばいいだけです。
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">アイコン定義方法
SPANタグにclassを設定することで、アイコンを表示さえることができます。
クラスは以下のようなルールで定義されています。
.ui-icon-{iconタイプ}-{iconサブ定義}-{方角}.
具体的には、以下のようにSPANタグにクラスを設定するようになります。
<span class="ui-icon ui-icon-arrowthick-1-n"></span>アイコン一覧
| <span class="ui-icon ui-icon-blank"></span> | |
| <span class="ui-icon ui-icon-caret-1-n"></span> | |
| <span class="ui-icon ui-icon-caret-1-ne"></span> | |
| <span class="ui-icon ui-icon-caret-1-e"></span> | |
| <span class="ui-icon ui-icon-caret-1-se"></span> | |
| <span class="ui-icon ui-icon-caret-1-s"></span> | |
| <span class="ui-icon ui-icon-caret-1-sw"></span> | |
| <span class="ui-icon ui-icon-caret-1-w"></span> | |
| <span class="ui-icon ui-icon-caret-1-nw"></span> | |
| <span class="ui-icon ui-icon-caret-2-n-s"></span> | |
| <span class="ui-icon ui-icon-caret-2-e-w"></span> | |
| <span class="ui-icon ui-icon-triangle-1-n"></span> | |
| <span class="ui-icon ui-icon-triangle-1-ne"></span> | |
| <span class="ui-icon ui-icon-triangle-1-e"></span> | |
| <span class="ui-icon ui-icon-triangle-1-se"></span> | |
| <span class="ui-icon ui-icon-triangle-1-s"></span> | |
| <span class="ui-icon ui-icon-triangle-1-sw"></span> | |
| <span class="ui-icon ui-icon-triangle-1-w"></span> | |
| <span class="ui-icon ui-icon-triangle-1-nw"></span> | |
| <span class="ui-icon ui-icon-triangle-2-n-s"></span> | |
| <span class="ui-icon ui-icon-triangle-2-e-w"></span> | |
| <span class="ui-icon ui-icon-arrow-1-n"></span> | |
| <span class="ui-icon ui-icon-arrow-1-ne"></span> | |
| <span class="ui-icon ui-icon-arrow-1-e"></span> | |
| <span class="ui-icon ui-icon-arrow-1-se"></span> | |
| <span class="ui-icon ui-icon-arrow-1-s"></span> | |
| <span class="ui-icon ui-icon-arrow-1-sw"></span> | |
| <span class="ui-icon ui-icon-arrow-1-w"></span> | |
| <span class="ui-icon ui-icon-arrow-1-nw"></span> | |
| <span class="ui-icon ui-icon-arrow-2-n-s"></span> | |
| <span class="ui-icon ui-icon-arrow-2-ne-sw"></span> | |
| <span class="ui-icon ui-icon-arrow-2-e-w"></span> | |
| <span class="ui-icon ui-icon-arrow-2-se-nw"></span> | |
| <span class="ui-icon ui-icon-arrowstop-1-n"></span> | |
| <span class="ui-icon ui-icon-arrowstop-1-e"></span> | |
| <span class="ui-icon ui-icon-arrowstop-1-s"></span> | |
| <span class="ui-icon ui-icon-arrowstop-1-w"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-n"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-ne"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-e"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-se"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-s"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-sw"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-w"></span> | |
| <span class="ui-icon ui-icon-arrowthick-1-nw"></span> | |
| <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> | |
| <span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span> | |
| <span class="ui-icon ui-icon-arrowthick-2-e-w"></span> | |
| <span class="ui-icon ui-icon-arrowthick-2-se-nw"></span> | |
| <span class="ui-icon ui-icon-arrowthickstop-1-n"></span> | |
| <span class="ui-icon ui-icon-arrowthickstop-1-e"></span> | |
| <span class="ui-icon ui-icon-arrowthickstop-1-s"></span> | |
| <span class="ui-icon ui-icon-arrowthickstop-1-w"></span> | |
| <span class="ui-icon ui-icon-arrowreturnthick-1-w"></span> | |
| <span class="ui-icon ui-icon-arrowreturnthick-1-n"></span> | |
| <span class="ui-icon ui-icon-arrowreturnthick-1-e"></span> | |
| <span class="ui-icon ui-icon-arrowreturnthick-1-s"></span> | |
| <span class="ui-icon ui-icon-arrowreturn-1-w"></span> | |
| <span class="ui-icon ui-icon-arrowreturn-1-n"></span> | |
| <span class="ui-icon ui-icon-arrowreturn-1-e"></span> | |
| <span class="ui-icon ui-icon-arrowreturn-1-s"></span> | |
| <span class="ui-icon ui-icon-arrowrefresh-1-w"></span> | |
| <span class="ui-icon ui-icon-arrowrefresh-1-n"></span> | |
| <span class="ui-icon ui-icon-arrowrefresh-1-e"></span> | |
| <span class="ui-icon ui-icon-arrowrefresh-1-s"></span> | |
| <span class="ui-icon ui-icon-arrow-4"></span> | |
| <span class="ui-icon ui-icon-arrow-4-diag"></span> | |
| <span class="ui-icon ui-icon-extlink"></span> | |
| <span class="ui-icon ui-icon-newwin"></span> | |
| <span class="ui-icon ui-icon-refresh"></span> | |
| <span class="ui-icon ui-icon-shuffle"></span> | |
| <span class="ui-icon ui-icon-transfer-e-w"></span> | |
| <span class="ui-icon ui-icon-transferthick-e-w"></span> | |
| <span class="ui-icon ui-icon-folder-collapsed"></span> | |
| <span class="ui-icon ui-icon-folder-open"></span> | |
| <span class="ui-icon ui-icon-document"></span> | |
| <span class="ui-icon ui-icon-document-b"></span> | |
| <span class="ui-icon ui-icon-note"></span> | |
| <span class="ui-icon ui-icon-mail-closed"></span> | |
| <span class="ui-icon ui-icon-mail-open"></span> | |
| <span class="ui-icon ui-icon-suitcase"></span> | |
| <span class="ui-icon ui-icon-comment"></span> | |
| <span class="ui-icon ui-icon-person"></span> | |
| <span class="ui-icon ui-icon-print"></span> | |
| <span class="ui-icon ui-icon-trash"></span> | |
| <span class="ui-icon ui-icon-locked"></span> | |
| <span class="ui-icon ui-icon-unlocked"></span> | |
| <span class="ui-icon ui-icon-bookmark"></span> | |
| <span class="ui-icon ui-icon-tag"></span> | |
| <span class="ui-icon ui-icon-home"></span> | |
| <span class="ui-icon ui-icon-flag"></span> | |
| <span class="ui-icon ui-icon-calculator"></span> | |
| <span class="ui-icon ui-icon-cart"></span> | |
| <span class="ui-icon ui-icon-pencil"></span> | |
| <span class="ui-icon ui-icon-clock"></span> | |
| <span class="ui-icon ui-icon-disk"></span> | |
| <span class="ui-icon ui-icon-calendar"></span> | |
| <span class="ui-icon ui-icon-zoomin"></span> | |
| <span class="ui-icon ui-icon-zoomout"></span> | |
| <span class="ui-icon ui-icon-search"></span> | |
| <span class="ui-icon ui-icon-wrench"></span> | |
| <span class="ui-icon ui-icon-gear"></span> | |
| <span class="ui-icon ui-icon-heart"></span> | |
| <span class="ui-icon ui-icon-star"></span> | |
| <span class="ui-icon ui-icon-link"></span> | |
| <span class="ui-icon ui-icon-cancel"></span> | |
| <span class="ui-icon ui-icon-plus"></span> | |
| <span class="ui-icon ui-icon-plusthick"></span> | |
| <span class="ui-icon ui-icon-minus"></span> | |
| <span class="ui-icon ui-icon-minusthick"></span> | |
| <span class="ui-icon ui-icon-close"></span> | |
| <span class="ui-icon ui-icon-closethick"></span> | |
| <span class="ui-icon ui-icon-key"></span> | |
| <span class="ui-icon ui-icon-lightbulb"></span> | |
| <span class="ui-icon ui-icon-scissors"></span> | |
| <span class="ui-icon ui-icon-clipboard"></span> | |
| <span class="ui-icon ui-icon-copy"></span> | |
| <span class="ui-icon ui-icon-contact"></span> | |
| <span class="ui-icon ui-icon-image"></span> | |
| <span class="ui-icon ui-icon-video"></span> | |
| <span class="ui-icon ui-icon-script"></span> | |
| <span class="ui-icon ui-icon-alert"></span> | |
| <span class="ui-icon ui-icon-info"></span> | |
| <span class="ui-icon ui-icon-notice"></span> | |
| <span class="ui-icon ui-icon-help"></span> | |
| <span class="ui-icon ui-icon-check"></span> | |
| <span class="ui-icon ui-icon-bullet"></span> | |
| <span class="ui-icon ui-icon-radio-off"></span> | |
| <span class="ui-icon ui-icon-radio-on"></span> | |
| <span class="ui-icon ui-icon-pin-w"></span> | |
| <span class="ui-icon ui-icon-pin-s"></span> | |
| <span class="ui-icon ui-icon-play"></span> | |
| <span class="ui-icon ui-icon-pause"></span> | |
| <span class="ui-icon ui-icon-seek-next"></span> | |
| <span class="ui-icon ui-icon-seek-prev"></span> | |
| <span class="ui-icon ui-icon-seek-end"></span> | |
| <span class="ui-icon ui-icon-seek-first"></span> | |
| <span class="ui-icon ui-icon-stop"></span> | |
| <span class="ui-icon ui-icon-eject"></span> | |
| <span class="ui-icon ui-icon-volume-off"></span> | |
| <span class="ui-icon ui-icon-volume-on"></span> | |
| <span class="ui-icon ui-icon-power"></span> | |
| <span class="ui-icon ui-icon-signal-diag"></span> | |
| <span class="ui-icon ui-icon-signal"></span> | |
| <span class="ui-icon ui-icon-battery-0"></span> | |
| <span class="ui-icon ui-icon-battery-1"></span> | |
| <span class="ui-icon ui-icon-battery-2"></span> | |
| <span class="ui-icon ui-icon-battery-3"></span> | |
| <span class="ui-icon ui-icon-circle-plus"></span> | |
| <span class="ui-icon ui-icon-circle-minus"></span> | |
| <span class="ui-icon ui-icon-circle-close"></span> | |
| <span class="ui-icon ui-icon-circle-triangle-e"></span> | |
| <span class="ui-icon ui-icon-circle-triangle-s"></span> | |
| <span class="ui-icon ui-icon-circle-triangle-w"></span> | |
| <span class="ui-icon ui-icon-circle-triangle-n"></span> | |
| <span class="ui-icon ui-icon-circle-arrow-e"></span> | |
| <span class="ui-icon ui-icon-circle-arrow-s"></span> | |
| <span class="ui-icon ui-icon-circle-arrow-w"></span> | |
| <span class="ui-icon ui-icon-circle-arrow-n"></span> | |
| <span class="ui-icon ui-icon-circle-zoomin"></span> | |
| <span class="ui-icon ui-icon-circle-zoomout"></span> | |
| <span class="ui-icon ui-icon-circle-check"></span> | |
| <span class="ui-icon ui-icon-circlesmall-plus"></span> | |
| <span class="ui-icon ui-icon-circlesmall-minus"></span> | |
| <span class="ui-icon ui-icon-circlesmall-close"></span> | |
| <span class="ui-icon ui-icon-squaresmall-plus"></span> | |
| <span class="ui-icon ui-icon-squaresmall-minus"></span> | |
| <span class="ui-icon ui-icon-squaresmall-close"></span> | |
| <span class="ui-icon ui-icon-grip-dotted-vertical"></span> | |
| <span class="ui-icon ui-icon-grip-dotted-horizontal"></span> | |
| <span class="ui-icon ui-icon-grip-solid-vertical"></span> | |
| <span class="ui-icon ui-icon-grip-solid-horizontal"></span> | |
| <span class="ui-icon ui-icon-gripsmall-diagonal-se"></span> | |
| <span class="ui-icon ui-icon-grip-diagonal-se"></span> |
問題点
他のウェブアイコン「Font Awesome」や「Ionicons」と違い、サイズを変更することができません。
ボタンなどのオブジェクトにアクセントとしてアイコンを設定するくらいの役割にしか使えそうにないですが、デザイン的に使えそうなものがあれば、ご利用ください。
ご参考
関連ページ
- ウェブアイコン「Font Awesome」の導入方法
- ウェブアイコン「Font Awesome」『Version 6』の紹介
- Google Fonts Iconsの紹介
- ウェブアイコン「Ionicons」のご紹介
- ウェブアイコン「Typicons」のご紹介
- ウェブアイコン「Foundation Icon Fonts 3」のご紹介
- Bootstrap Iconsの紹介
