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

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によって上書きされるかどうかを確認してください。

于 2012-07-30T13:32:19.137 に答える
1

私はあなたがclass="ui-icon-mapa"htmlまたはa[data-icon="mapa"]cssで使うべきだと思います

于 2012-07-30T13:32:32.270 に答える
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の2番目の部分です。

これは私にとっては問題なく機能します。それはあなたも大きなアイコンをしなければならないということかもしれません。

于 2013-12-12T08:17:43.890 に答える