1. 按钮左侧图标
<a href="#" data-role="button" data-icon="arrow-l">Back</a>
<a href="#" data-role="button" data-icon="gear">Settings</a>
<a href="#" data-role="button" data-icon="delete">Delete</a>
2. 按钮右侧图标
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="right">Save</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="right">Add</a>
3. 按钮上方和下方图标
<a href="#" data-role="button" data-icon="grid" data-iconpos="top">Grid</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="bottom">Star</a>
4. 自定义图标位置
你还可以使用 data-iconpos 属性手动设置图标的位置，可选值为 "left"、"right"、"top"、"bottom"。
<a href="#" data-role="button" data-icon="info" data-iconpos="top">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="bottom">Home</a>
这些示例演示了如何在 jQuery Mobile 按钮中使用内置图标。你可以根据实际需求选择适合你应用的图标，并根据需要调整图标的位置。jQuery Mobile 提供的图标是矢量图形，它们会自动适应不同屏幕尺寸和分辨率，有助于确保应用在各种设备上呈现一致的外观。详细的图标和按钮选项可以在[官方文档](https://demos.jquerymobile.com/1.4.5/icons/)中找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/9420/jQuery Mobile