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.
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;
}
Check that the given CSS property is overwritten later by other CSS or not!
I think you should use class="ui-icon-mapa" in html, or a[data-icon="mapa"] in css
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.
