メニュー項目にアイコンを表示する

組み込みの Wijmo アイコンを使用して、メニュー項目にアイコンを表示できます。また、独自のカスタムアイコンを追加することもできます。組み込みのアイコンは、 jQuery UI および jQuery Mobileによって提供されるアイコンです。

組み込みのアイコンを使用するには、"ui-icon" を参照するクラス属性を HTML 要素に追加して、スペースを続け、以下のリスト内のいずれかのアイコン名を指定します。オプションで、アイコンの表示位置情報をクラスに追加できます。

Web アプリケーション用の組み込みアイコン

モバイルアプリケーション用の組み込みアイコン

たとえば、メニュー項目にコメントアイコンを追加するには、リスト項目に次のようなマークアップを使用します。

<li>（リスト項目）および <a>（アンカー）要素は通常どおりですが、<a> 要素内で、メニュー項目テキストの直前に <span> 要素を追加します。この要素に、アイコン名を指定して ui-icon クラス属性を割り当て、オプションでアイコンの表示位置（この例では wijmo-wijmenu-icon-right）を指定します。

デフォルトでは、アイコンはメニュー項目テキストの左側に表示されます。

アイコンのマークアップ	コードのコピー
<li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-icon-right"></span> Comment</a></li>

関連トピック

参照