CODEWITHSUNDEEP
jquery-mobile
user5011356
user5011356

Reputation:

jQuery Mobile scaling icon in span

I'm trying to put a standard jQuery Mobile icon inline with a span element, and scale the icon:

<span ui-btn-icon-right ui-icon-refresh style="position:relative;background-size:75%;"/>

The icon is placed perfectly, however the background-size has no effect. A !important does not help.

Upvotes: 0

Views: 168

Answers (1)

ezanker
ezanker

Reputation: 24738

The icon image is actually applied to the :after pseudoelement. So your background CSS needs to applied there:

<span class="ui-icon-refresh ui-btn-icon-notext inlineIcon"></span>

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}
.inlineIcon:after {
    background-size: 75% !important;
}

DEMO

Upvotes: 2

Related Questions