# 給按鈕添加圖標 Adding Icons to Buttons 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"主題下的圖標按鈕**