jQuery Mobile ボタンのアイコン

jQuery Mobile が提供する一式のアイコンを使用すると、ボタンがより魅力的になります。

jQuery Mobile ボタンにアイコンを追加

ボタンにアイコンを追加するには、data-icon 属性を使用してください：

<a href="#anylink" data-role="button" data-icon="search">検索</a>

ヒント：<button> または <input> 要素で data-icon 属性を使用できます。

以下に、jQuery Mobile が提供する一部の利用可能なアイコンを挙げました：

属性値 説明 アイコン 例
data-icon="arrow-l" 左矢印 テスト
data-icon="arrow-r" 右矢印 テスト
data-icon="delete" 削除 テスト
data-icon="info" 情報 テスト
data-icon="home" ホーム テスト
data-icon="back" 戻る テスト
data-icon="search" 検索 テスト
data-icon="grid" グリッド テスト

jQuery Mobile ボタンのアイコンに関する詳細情報が必要な場合は、私たちの jQuery Mobile アイコンリファレンスマニュアル。

アイコンの位置決定

アイコンが配置される位置も指定できます：上、右、下、左。

data-iconpos 属性を使用して位置を指定してください：

アイコン位置：

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>

自分で試してみる

ヒント：デフォルトでは、すべてのボタン内のアイコンは左に配置されています。

アイコンのみ表示

アイコンのみを表示する場合は、data-iconposを"notext"に設定してください：

戻る:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">検索</a>

自分で試してみる