jQuery Mobile 提供了一套讓按鈕看起來更稱心如意的圖標(biāo)。

添加圖標(biāo)到 jQuery Mobile 按鈕

我們可以使用 ui-icon 類將圖標(biāo)添加到按鈕上，并可以使用指定類來設(shè)置按鈕位置。

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

注意： 在其他方式的按鈕上，如列表或表單中的按鈕需要使用 data-icon 屬性。在接下來的章節(jié)中我們會具體介紹。

下面我們列出一些 jQuery Mobile 提供的可用圖標(biāo)：

按鈕類	描述	按鈕	實例
ui-icon-arrow-l	左箭頭		嘗試一下
ui-icon-arrow-r	右箭頭		嘗試一下
ui-icon-info	信息		嘗試一下
ui-icon-delete	刪除		嘗試一下
ui-icon-back	后退		嘗試一下
ui-icon-audio	揚聲器		嘗試一下
ui-icon-lock	掛鎖		嘗試一下
ui-icon-search	搜索		嘗試一下
ui-icon-alert	警告		嘗試一下
ui-icon-grid	網(wǎng)格		嘗試一下
ui-icon-home	主頁		嘗試一下

如需查看所有 jQuery Mobile 按鈕圖標(biāo)的完整參考手冊，請訪問我們的 jQuery Mobile 圖標(biāo)參考手冊。

定位圖標(biāo)

您也可以規(guī)定圖標(biāo)定位在按鈕的什么部位：頂部（top）、右側(cè)（right）、底部（bottom）、左側(cè)（left）。

請使用 ui-btn-icon 屬性來指定位置：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">頂部</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-right">右側(cè)</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-left">左側(cè)</a>

	如果你未指定按鈕圖片的位置，圖標(biāo)將不顯示。

只顯示圖標(biāo)

如果你只想顯示圖標(biāo)，可以使用 "notext":

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-notext">搜索</a>

移除圓圈

默認(rèn)情況下，所有的圖標(biāo)都有一個灰色的圓圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 類：

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left">使用圓圈 (默認(rèn))</a>

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left ui-nodisc-icon">去掉圓圈</a>

黑色、白色按鈕

默認(rèn)情況下，所有圖標(biāo)都是白色的。 如果需要改變圖標(biāo)顏色為黑色，可以在元素添加 "ui-alt-icon"：

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left">白色</a>

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left ui-alt-icon">黑色</a>

向容器添加 "ui-nodisc-icon" 類
使用 "ui-nodisc-icon" 類的實例。

向容器添加 "ui-alt-icon" 類
使用 "ui-alt-icon" 類的實例。