jQuery Mobile の <a> と <button> 要素にアイコンを追加するには、アイコン・クラスを使用して、 次のように配置します(唯一の例外は、ナビゲーションバーのボタンで、もっと下に表示されます)
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a>
Try it
<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</button>
Try it
<input> ボタンにアイコンを追加するには、data-icon 属性を使用します:
<input type="button" value="Refresh page" data-icon="refresh">
Try it
ナビゲーションバーのボタンにアイコンを追加するには、data-icon 属性を使用します:
<a href="#anylink" data-icon="refresh">Refresh Page</a>
Try it
リストボタンにアイコンを追加するには、<li> の data-icon 属性を使用します:
<li data-icon="refresh"><a href="#">Click me</a></li>
Try it
下に、jQuery Mobile が提供するすべてのアイコンをリストします:
| 値 | 説明 | アイコン | 例 |
|---|---|---|---|
| action | アクション(矢印は時計回りにボックスの外を指す) | Try it | |
| アラート | Alert | Try it | |
| audio | オーディオ/サウンド/スピーカー | Try it | |
| arrow-d-l | 左下を指す矢印 | Try it | |
| arrow-d-r | 右下を指す矢印 | Try it | |
| arrow-u-l | 左上を指す矢印 | Try it | |
| arrow-u-r | 右上を指す矢印 | Try it | |
| arrow-l | 左向き矢印 | Try it | |
| arrow-r | 右向きの矢印 | Try it | |
| arrow-u | 上向き矢印 | Try it | |
| arrow-d | 下向き矢印 | Try it | |
| back | 戻る(反時計回りの上向き曲線の矢印) | Try it | |
| bars | バー(互いの上に3本の横バー) | Try it | |
| bullets | 中点 (互いの上に3つの横バー付き中点) | Try it | |
| calendar | カレンダ | Try it | |
| camera | カメラ | Try it | |
| carat-d | 下向きカラット | Try it | |
| carat-l | 左向きカラット | Try it | |
| carat-r | 右向きカラット | Try it | |
| carat-u | 上向きカラット | Try it | |
| check | チェックマーク | Try it | |
| clock | 時計 | Try it | |
| cloud | 雲 | Try it | |
| comment | コメント | Try it | |
| delete | 削除 (X) | Try it | |
| edit | 編集 / 鉛筆 | Try it | |
| eye | 目 | Try it | |
| forbidden | 禁止記号 | Try it | |
| forward | 前に | Try it | |
| gear | 歯車 | Try it | |
| grid | グリッド | Try it | |
| heart | 心 / 愛のシンボル | Try it | |
| home | ホーム | Try it | |
| info | 情報 | Try it | |
| location | 場所 / GPS | Try it | |
| lock | ロック / 南京錠 | Try it | |
| メール / 手紙 | Try it | ||
| minus | マイナス | Try it | |
| navigation | ナビゲーション | Try it | |
| phone | 電話 | Try it | |
| power | 電源 (On/off) | Try it | |
| plus | プラス | Try it | |
| recycle | リサイクル | Try it | |
| refresh | リフレッシュ | Try it | |
| search | 検索 | Try it | |
| shop | ショップ / Pag / 財布 | Try it | |
| star | 星 | Try it | |
| tag | タグ | Try it | |
| user | ユーザ / 人 | Try it | |
| video | ビデオカメラ | Try it |