jQuery Mobile 自定义图标不起作用答案

【问题标题】：jQuery Mobile custom icon not workingjQuery Mobile 自定义图标不起作用
【发布时间】：2014-09-11 10:54:35
【问题描述】：

不知何故，我无法显示自定义 ui 图标。在此示例中，两个图像文件（18x18 和 36x36 像素）与 html 文件位于同一目录中。谁能发现这里有什么问题？谢谢。

<!DOCTYPE html>
<html>
<head>
    <title>-</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.3/theme-classic/theme-classic.css" />

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

    <style style="text/css">
        .ui-icon-dbblue {
            background-image: url("dbblue.png");
        }

        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            .ui-icon-dbblue {
                    background-image: url("dbblue_hr.png");
                    background-size: 18px 18px;
            }
        }
    </style>

</head>
<body>

    <div data-role="page" data-title="Control" id="control" data-add-back-btn="true">
        <div data-role="content">
            <a href="#" data-role="button" data-icon="dbblue" data-iconpos="notext" title="dbblue"></a>
        </div>
    </div>

</body>
</html>

【问题讨论】：

所有看起来都是为了诚实？
所以显示的是标准图标？
@Regent 这只是一个没有任何图标的深灰色按钮。
你的图标大小应该是18*18

标签： jquery jquery-mobile mobile icons

【解决方案1】：

在你的 CSS 中添加 !important。

 <style style="text/css">
    .ui-icon-dbblue {
        background-image: url("dbblue.png") !important;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .ui-icon-dbblue {
                background-image: url("dbblue_hr.png") !important;
                background-size: 18px 18px !important;
        }
    }
</style>

【讨论】：

如果你覆盖现有的图标，你可以使用重要的。但它是一个新的图标。如此重要的行不通。
@Raj 你试过还是只是猜测？请尝试一下。它有效。
这确实有效。我尝试过添加“no-repeat rgba(0, 0, 0, 0.4) !important;”我在其他地方找到的，但这不起作用。 !important 单独工作。现在“唯一”的问题是图标没有正确放置在按钮上并被重复。 “不重复！重要；”但是不起作用，然后根本不显示图标。
要使用 no-repeat 你必须使用它作为背景： url("dbblue.png") no-repeat !important;而不是背景图像。但是您仍然必须正确放置图像。我认为使用背景而不是背景图像只会解决“图标不显示”的问题。
是的，你是对的。我有要显示的图标，并使用以下代码显示在它所属的按钮的中心： .ui-icon-dreambox-blue { background-image: url("/static/images/dreambox- blue.png") ！重要；背景重复：不重复！重要；背景位置：中心！重要；唯一的问题是按钮本身看起来与其他使用标准图标的按钮不同。自定义按钮是“扁平的”，其他按钮看起来有点圆。这是我的意思的图像：link