jquery mobile自定义图标显示未正确渲染_Jquery_Html_Css_Jquery Mobile

jquery mobile自定义图标显示未正确渲染

jquery html css jquery-mobile

jquery mobile自定义图标显示未正确渲染,jquery,html,css,jquery-mobile,Jquery,Html,Css,Jquery Mobile,我正在尝试为jQuery mobile中的按钮创建自定义图标。图标的大小为256px （显示的图标使您可以看到我希望看到的内容）当我在浏览器中查看页面时，其呈现方式如下：我的期望是显示完整的图标。我想知道为什么会这样。以下是该页面的html代码： <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=

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

256px

（显示的图标使您可以看到我希望看到的内容）当我在浏览器中查看页面时，其呈现方式如下：

我的期望是显示完整的图标。我想知道为什么会这样。以下是该页面的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>


我的页面
.ui图标钱包{
背景图片：url（“images/wallet16.png”）；
背景尺寸：18px 18px；
}
我的头衔
你好，世界
我的页脚

我尝试过增加和减少背景大小，但都没有效果。如果有任何帮助，我将不胜感激。

添加“背景色：透明；”只显示背景图像。

正如@Dharman所说，如果希望在

.ui图标钱包

类上显示背景图像，则必须将该类应用于元素。除非您在某个地方有一个脚本，可以检查带有

数据图标的项目并自动填充它们，否则您需要将a
声明更改为：
<a href="templates/profile.html" data-role="button"  data-iconpos="right" class="ui-icon-wallet" >View Balance</a>

此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;
}

我在你的html代码中看不到这个类，是吗？DOCTYPE
声明应该是大写的，顺便说一句：Fiddle@Dharman我不明白，你是说class=“wallet”？不，我已经找到了。JS会自动为您插入类。JQUERY-UI会为他自动填充。
.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;
}