jQuery Mobile 按鈕圖標

jQuery Mobile 提供了一套讓按鈕看起來更稱心如意的圖示。

新增圖示到 jQuery Mobile 按鈕

我們可以使用 ui-icon 類別將圖示新增到按鈕上，並且可以使用指定類別來設定按鈕位置。

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

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

下面我們列出一些 jQuery Mobile 提供的可用圖示：

如需查看所有 jQuery Mobile 按鈕圖示的完整參考手冊，請造訪我們的 jQuery Mobile 圖示參考手冊。

定位圖示

您也可以規定圖示定位在按鈕的哪個部位：頂部（top）、右邊（right）、底部（bottom）、左邊（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">右侧</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">左侧</a>

按鈕類別	描述	按鈕	#實例
##### ui-icon-arrow-l###	左箭頭
##ui-icon			ui-icon##右箭頭
		ui-icon-delete
	ui-icon-back	#後退	#ui-icon-audio
ui-icon-lock	掛鎖
	##-w-w> -search	搜索
	ui-icon-alert	警告
	ࠠ#	試試看
	##               #

##如果你未指定按鈕圖片的位置，圖示將不會顯示。

如果你只想顯示圖標，可以使用"notext":

#移除圓圈

預設情況下，所有的圖示都有一個灰色的圓圈。如果你不需要它，可以在元素中使用"ui-nodisc-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-nodisc-icon">去掉圆圈</a>

黑色、白色按鈕

預設情況下，所有圖示都是白色的。 如果需要改變圖示顏色為黑色，可以在元素中加入"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-alt-icon" 類別的實例。