CODEWITHSUNDEEP
jqueryhtmlcss
Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

How to change a button data-icon size

I am trying to change data-icon size in jQuery Mobile 1.4.2 - for example:

<a href="#workerPageForDetails" id="findAJobButton" data-role="button" data-inline="true" data-icon="search">Find a job</a>

I want the search icon to fill all the button if possible, resize it if not.

Can CSS or jQuery do that? How?

Upvotes: 0

Views: 13916

Answers (3)

lincolnberryiii
lincolnberryiii

Reputation: 670

32 x 32 pixel icons using CSS:

.ui-btn::after {
    background-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
}

Upvotes: 2

davidcondrey
davidcondrey

Reputation: 35983

You can replace the icon with your own custom icon and make it whatever size you want.

.ui-icon-search {
    background-image: url('search.png');
    width:24px;
    height: 24px;
}

Upvotes: 1

GramThanos
GramThanos

Reputation: 3622

Try changing the background scale of the icon: background-size: 75%;

Upvotes: 0

Related Questions