Question

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.

Answer 1

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!