JQuery Mobile UI Icon是JQuery Mobile中非常有用的一個組件，可以為頁面中的各個元素添加圖標，提高網站的美觀性和易用性。以下是JQuery Mobile UI Icon的一些基本用法和注意事項。
首先，要在頁面頭部引入JQuery Mobile的CSS和JavaScript文件，在頁面中定義一個容器元素，然后在該容器元素中使用UI Icon組件，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<h2>UI Icons Example</h2>
<p>This is an example of UI Icons.</p>
<a href="#" class="ui-btn ui-icon-grid ui-btn-icon-left">Grid View</a>
<a href="#" class="ui-btn ui-icon-list ui-btn-icon-left">List View</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>在上面的例子中，我們使用了兩個鏈接元素，分別添加了grid和list圖標。通過在class屬性中添加ui-icon-grid和ui-icon-list來指定圖標類型，其中ui-btn-icon-left表示圖標顯示在鏈接文本的左側。
當然，UI Icon還可以應用于其他元素，比如輸入框、按鈕等等。下面是一個例子，使用UI Icon為輸入框添加放大和縮小圖標：
<label for="slider">Zoom:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true">
<button data-inline="true" class="ui-btn ui-icon-plus ui-btn-icon-notext"></button>
<button data-inline="true" class="ui-btn ui-icon-minus ui-btn-icon-notext"></button>需要注意的是，UI Icon使用了CSS Sprite技術，即將不同的圖標放到一個大圖中，并通過CSS的背景定位屬性顯示在頁面中。因此，如果要顯示不同的圖標，需要在class屬性中指定不同的圖標名稱，具體的名稱可以在官方文檔中查看。