看看在docu如何獲得自定義圖標
自定義圖標
要使用自定義圖標,指定具有類似的myapp電子郵件唯一名稱的數據圖標值 和按鈕插件將 通過在數據圖標值前綴ui-icon-生成一個類,並將其應用於按鈕:ui-icon-myapp-email。
然後,您可以在您的樣式表中編寫 CSS規則,該規則的目標是使用ui-icon-myapp-email 類來指定圖標背景源。要保持與其他圖標的視覺效果保持一致,請創建一個白色圖標18x18 像素以alpha透明度保存爲PNG-8。
在這個例子中,我們只是指着一個獨立的圖標圖像,但 你可以很容易地使用圖標精靈,並指定 定位代替,就像我們在 框架使用的圖標精靈。
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-icon-taifun { background-image: url("taifun.png"); }
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li><a href="index.html">Canary</a></li>
<li><a href="index.html">Cat</a></li>
<li><a href="index.html">Dog</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li><a href="index.html">Chicken</a></li>
<li><a href="index.html">Cow</a></li>
<li><a href="index.html">Duck</a></li>
</ul>
</div><!-- /collapsible -->
</div>
</div>
</body>
</html>
截圖:
