我必须在 jquery mobile 的按钮中使用自定义图标。我有图标，它出现在按钮中。但我面临的问题是，默认圆圈出现在我的图标周围。我需要删除此边框圆圈并按原样显示图标。如何解决此问题？
这是我的 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
<input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"></a>
</div>
<div data-role="footer" data-position="fixed" data-id="pFooter">
<h1>Test</h1>
</div>
</div>
</body>
</html>
和以下 CSS:
.ui-icon-save-icon{
background: url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}
你可以在这里看到它 - http://jsfiddle.net/yPRpt/
请注意，图标丢失了，但您可以在示例中看到圆圈。
最佳答案
到目前为止，我找到的唯一方法是将元素上的“data-icon”属性设置为“custom”，然后使用透明背景图像在 CSS 中设置样式
即 在标记中:
<a id="hlFind" data-role="button" data-icon="custom">Find</a>
在 CSS 中:
#hlFind .ui-icon-custom {
background:url("images/icon_phone_green.png") no-repeat scroll 0 0 transparent;
}
关于jquery - 在 jquery mobile 的按钮中使用自定义矩形图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6584753/