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 |