CODEWITHSUNDEEP
jquerymobilebuttonjquery-mobile
Dalibor Vlaho
Dalibor Vlaho

Reputation: 18

Jquery Mobile custom button image

I have a button:

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

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

Problem is that button doesnt show an image/icon at all. I used every possible solution but this is not working.

Upvotes: 0

Views: 7107

Answers (3)

Motoo
Motoo

Reputation: 90

I don't know which version of JQM you are using, but in 1.3 version this can be done in following way.

First you need to make CSS class:

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

Then in your HTML markup you can use this icon in buttons following way:

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

Note data-icon attribute, it is second part of our css class tipwin-download.

This works for me just fine. It could be that you have to big icon also.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

You're trying to set the button's image using a class but don't set any class to a. so set class=.ui-icon-mapa like following:

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

or if possible then directly using HTML like:

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

Or

in your CSS try:

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

Note

Check that the given CSS property is overwritten later by other CSS or not!

Upvotes: 1

Danil Speransky
Danil Speransky

Reputation: 30453

I think you should use class="ui-icon-mapa" in html, or a[data-icon="mapa"] in css

Upvotes: 0

Related Questions