0

我有一个按钮：

<a href="#" data-role="button" data-icon="mapa" data-theme="a">Vidi Mapu</a>

使用这个 CSS：

.ui-icon-mapa {
    background-image: url("images/mapa.png") !important;
    background-position: 4px 50%;
    background-size: 26px 21px;
    height: 24px;
    margin-top: -12px !important;
    width: 35px;
}

问题是按钮根本不显示图像/图标。我使用了所有可能的解决方案，但这不起作用。

4

3 回答 3

1

我不知道您使用的是哪个版本的 JQM，但在 1.3 版本中可以通过以下方式完成。

首先你需要创建 CSS 类：

    .ui-icon-tipwin-download {
    background-image: url("images/other/download_app_icon_18x18.png");
}

然后在您的 HTML 标记中，您可以通过以下方式在按钮中使用此图标：

 <a href='javascript:void();' data-role='button' data-theme='a' data-icon='tipwin-download'>Download</a>

注意data-icon属性，它是我们的 css 类tipwin-download的第二部分。

这对我来说很好。也可能是您必须使用大图标。

于 2013-12-12T08:17:43.890 回答
1

您正在尝试button使用 a 设置 的图像，class但不要将任何设置class为a. 所以设置class=.ui-icon-mapa如下：

$('a[data-icon=mapa]').addClass('.ui-icon-mapa'); // using jQuery

或者如果可能的话，直接使用 HTML，如：

<a class="ui-icon-mapa" href="#" data-role="button" data-icon="mapa" data-theme="a">Vidi Mapu</a>

或者

在您的 CSS 中尝试：

a[data-icon="mapa"].ui-icon-mapa {
    background-image: url("images/mapa.png") !important;
    background-position: 4px 50%;
    background-size: 26px 21px;
    height: 24px;
    margin-top: -12px !important;
    width: 35px;
}

笔记

检查给定的 CSS 属性是否被其他 CSS 覆盖！

于 2012-07-30T13:32:19.137 回答
1

我认为您应该class="ui-icon-mapa"在 html 或a[data-icon="mapa"]css 中使用

于 2012-07-30T13:32:32.270 回答