CODEWITHSUNDEEP
jquery-mobilebuttonstylesiconsreset
Jordan H
Jordan H

Reputation: 55715

Remove/override default icon styling from jQuery Mobile

In the header of my mobile web app, I want to provide a settings icon, and only a settings icon. I don't want any styles rendered. jQuery Mobile adds on a lot of styling, and I just want to remove it. I've gotten close, but ran into some problems.

Here I define the custom icon in the header:

<a href="#settings" class="ui-btn ui-icon-settings ui-btn-icon-notext" data-transition="flip"></a>

And this CSS will remove the button and background color it adds under the icon (.toolbar is a class I defined for the header):

.toolbar .ui-btn, .toolbar .ui-btn-up, .toolbar .ui-btn-hover, .toolbar .ui-btn-down, .toolbar     .ui-btn-inner,
.ui-btn-icon-left::after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after
        {
            background:none;
        }

I need to be able to set its size and always remain centered in the header (for all devices accessing the site). jQuery Mobile puts the icon in a bounding box so if I increase the size of my icon to 30px it cuts off part of the icon. 25px looks ok but isn't quite big enough and it's not centered perfectly in their defined box. I need to get rid of that box (which appears on hover), which you can see in this image.

screenshot

Questions: Is there a better way to add a simple icon to a header and avoid having to reset/override the styles? Or what do I need to add to get the desired result? I also want to do this for text-only buttons, so if I can kill 2 birds with one stone that'd be great.

Thanks a ton!

PS. I'm utilizing jQM v 1.4.0 rc1.

Upvotes: 1

Views: 2845

Answers (1)

ezanker
ezanker

Reputation: 24738

Here is a DEMO FIDDLE

I gave the button an id and added the class ui-nodisc-icon to hide the disc.

<a id="btnSettings" href="#settings" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-nodisc-icon" data-transition="flip"></a>

The CSS to hide the button and allw sizing of the icon is:

#btnSettings{
    background-color: transparent;
    border: 0;
}
#btnSettings:after {
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    margin-left: -15px;
    margin-top: -15px;
}

Set the :after width, height, and background size to the size icon you want and then set the Margin left and top to negative one half the height and width to keep it centered.

Upvotes: 5

Related Questions