Question

我有一个按钮：

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

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

Answer 1

您尝试使用button设置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覆盖！

Answer 2

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

Answer 3

我不知道您使用的是哪个版本的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>

注意数据图标属性，它是我们的css类的第二部分 tipwin-download 。

这对我很有用。可能你也需要大图标。

Jquery Mobile自定义按钮图像

3 个答案:

注意