Question

我试图在jQuery mobile中为按钮创建自定义图标。图标的大小为256px

enter image description here

（显示图标，以便您可以看到我希望看到的内容）当我在浏览器中查看页面时，它就是这样呈现的方式：

enter image description here

我的期望是显示完整的图标。我想知道为什么会这样。这是该页面的HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<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="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>
 <style type="text/css">

.ui-icon-wallet {
    background-image: url("images/wallet16.png");
    background-size: 18px 18px;

}
 </style>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Hello world</p>
    <a href="templates/profile.html" data-role="button"  data-iconpos="right" data-

    icon="wallet" >View Balance</a>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>My Footer</h4>
    </div><!-- /footer -->

    </div><!-- /page -->
</body>
</html>

我已经尝试增加和减少背景大小无济于事。任何帮助都将不胜感激。

Answer 1

这个css垫片应该有所帮助：

.ui-icon-wallet {
    background-image: url("http://i.stack.imgur.com/T06je.png");
    background-size: 32px 32px;
    background-color: inherit;
    width: 32px;
    height:32px;
    margin-top:-16px !important;
}

http://jsfiddle.net/HVMHm/1/

Answer 2

添加'background-color：transparent;'仅显示背景图像。

Answer 3

正如@Dharman所说，如果你想在.ui-icon-wallet类上有背景图像，你必须将该类应用于该元素。除非您在某处检查具有data-icon属性的项目并自动填充它们，否则您需要将a声明更改为：

<a href="templates/profile.html" data-role="button"  data-iconpos="right" class="ui-icon-wallet" >View Balance</a>

然后相应地调整你的CSS;正如它的写作，它会一遍又一遍地重复一个小图标。例如：

.ui-icon-wallet {
    background: url("http://i.stack.imgur.com/T06je.png") no-repeat;
    background-size: 48px 48px;
    background-position: 98% 50%;
}

DEMO

jquery移动自定义图标显示无法正确呈现

3 个答案: