Jquery Mobile框架包含了一組最常用的移動應用程序所需的圖標，為了減少下載的大小，Jquery Mobile包含的是的白色的圖標sprite圖片，並自動在圖標后添加一個半透明的黑圈以確保在任何背景色下圖片都能夠清晰顯示。
給鏈接添加data-icon 屬性，可以添加按鈕的圖標
html代碼
<a href=”index.html” data-role=”button” data-icon=”delete”>Delete</a>
帶有圖標的按鈕：
圖標 Icon set
data-icon屬性可以被用來創建如下所示的圖標
左箭頭 data-icon=”arrow-l”
右箭頭 data-icon=”arrow-r”
上箭頭 data-icon=”arrow-u”
下箭頭 data-icon=”arrow-d”
刪除 data-icon=”delete”
添加 data-icon=”Plus”
減少 data-icon=”minus”
檢查 data-icon=”Check”
齒輪 data-icon=”gear”
前進 data-icon=”Forward”
后退 data-icon=”Back”
網格 data-icon=”Grid”
五角星 data-icon=”Star”
警告 data-icon=”Alert”
信息 data-icon=”info”
首頁 data-icon=”home”
搜索 data-icon=”Search”
圖標組 Icon set
默認情況下，所有按鈕圖標出現在按鈕的文本的左側。
可以通過data-iconpos=”top” / “bottom” 屬性來覆蓋此默認
<a href=”index.html” data-role=”button” data-icon=”delete” data-iconpos=”right”>Delete</a>
一個圖標在右邊的按鈕：
也可以用 data-iconpos=”top”創建圖標在文本上方的按鈕
一個圖標在文字上方的按鈕：
也可以用 data-iconpos=”bottom”創建圖標在文本下方的按鈕
一個圖標在文字下方的按鈕：
你可以通過data-iconpos=”notext”創建一個只有圖標的按鈕。button插件會在屏幕上隱藏文本，但是會把文本作為 title屬性作為screen readers的問容和支持小提示的瀏覽器， 例如，把前例中的 data-iconpos=”right”替換為data-iconpos=”notext”
<a href=”index.html” data-role=”button” data-icon=”delete” data-iconpos=”notext”>Delete</a>
一個只有圖標的按鈕
自定義圖標 Custom Icons
要使用自定義圖標，指定一個唯一的data-icon 值（比如data-icon=“myapp-email ”）?Jquery Mobile的button插件會生成一個class值添加上去，該值由ui-icon-與data-icon的值組合而成（ui-icon- myapp-email ），然后在css中指定這個類的背景圖片地址。為了保持視覺效果的一致，請使用png-8格式的白色8*18的透明圖標
圖標和地址 Icons and themes
在白色圖標后的半透明的黑色圓圈確保了在任何背景色下圖片都能夠清晰顯示，也使它能很好的工作在Jquery Mobile主題系統中。以下是一些在不同主題樣式下圖標按鈕的例子
“A”主題下的圖標按鈕
“B”主題下的圖標按鈕
“C”主題下的圖標按鈕
==================================可愛的分隔線======================================
很多時候，系統圖標不能滿足我們的要求，那么如何自定義導航圖標？查找了很多相關資料、google、百度一番之后，發現通過id來定義是個不錯的選擇，看一下做好的效果，不錯吧！
Css Code:
1 |
.footer .ui-btn .ui-btn-inner{ padding-top:60px; } |
2 |
.footer .ui-btn .ui-icon{width:60px;height:60px;} |
3 |
#btn-about .ui-icon{background:url(../images/icon.png) no-repeat 0 50%;background-size:300px 60px;} |
4 |
#btn-value .ui-icon{background:url(../images/icon.png) no-repeat -60px 50%;background-size:300px 60px;} |
5 |
#btn-technology .ui-icon{background:url(../images/icon.png) no-repeat -120px 50%;background-size:300px 60px;} |
6 |
#btn-case .ui-icon{background:url(../images/icon.png) no-repeat -180px 50%;background-size:300px 60px;} |
7 |
#btn-contactus .ui-icon{background:url(../images/icon.png) no-repeat -240px 50%;background-size:300px 60px;} |
Html Code:
1 |
<div class="footer" data-theme="a" data-role="footer" data-position="fixed"> |
2 |
<div data-role="navbar"> |
3 |
<ul> |
4 |
<li><a id="btn-about" href="#page1" data-icon="custom" data-transition="slide">關於</a></li> |
5 |
<li><a id="btn-value" href="#page2" data-icon="custom" data-transition="slide">價值</a></li> |
6 |
<li><a id="btn-technology" href="#page3" data-icon="custom" data-transition="slide">技術</a></li> |
7 |
<li><a id="btn-case" href="#page4" data-icon="custom" data-transition="slide">案例</a></li> |
8 |
<li><a id="btn-contactus" class="ui-btn-active" href="#page5" data-icon="custom" data-transition="slide">聯系</a></li> |
9 |
</ul> |
10 |
</div> |
11 |
</div> |