Using a custom rectangular icon in button in jquery mobile

Question

I have to use a custom icon in a button in jquery mobile.I have the icon with me and it is coming in the button.But the problem I am facing is,the default circle is appearing around my icon.I need to remove this border circle and just show the icon as it is.How to fix this issue?

This is the html I have:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
           </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                <input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"></a>
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
               <h1>Test</h1>
            </div>    
        </div>
   </body>
</html>

and the following CSS:

.ui-icon-save-icon{
    background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}

You can see it here - http://jsfiddle.net/yPRpt/

Please note that the icon is missing,but you can see the circle in the example.

trevorgk · Accepted Answer · 2011-07-13 05:30:08Z

4

The only way that I have found so far to do this is to set the 'data-icon' attribute on the element to 'custom' and then style it in the CSS using a transparent background image

ie in the markup:

<a id="hlFind" data-role="button" data-icon="custom">Find</a>

in the css:

#hlFind .ui-icon-custom {
    background:url("images/icon_phone_green.png") no-repeat scroll 0 0 transparent;
}

answered Jul 13, 2011 at 5:30

trevorgk

1,46615 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DemitryT Over a year ago

Awesome, thanks for the good idea. They key thing there is "transparent". I had an image that was 14x14 so added "background-size: 14px 14px". I was able to remove "scroll" and changed "0 0" to "2px 2px".

Ben · Accepted Answer · 2011-07-05 16:42:02Z

2

The only way you're going to be able to remove the semi-transparent circle that jQuery Mobile's theming adds to buttons is to identify and override the relevant CSS and / or Javascript responsible.

Alternatively, why not modify your custom icon to work with what jQM does?

answered Jul 5, 2011 at 16:42

Ben

7,59533 silver badges46 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-07-05 15:07:54Z

1

I don't think you can remove the circle.

The documentation:

The jQuery Mobile framework...automatically adds a semi-transparent black circle

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-icons.html

You might be able to create a non-transparent icon with the background as large as the circle and the same color as the button, but I am not sure this would work. (untested)

answered Jul 5, 2011 at 15:07

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Rob · Accepted Answer · 2013-01-08 20:32:28Z

1

override the below code in jquery mobile css file

.ui-icon-searchfield:after {
    background:                         #666 /*{global-icon-color}*/;
    background:                         rgba(0,0,0,.4) /*{global-icon-disc}*/;
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius:                 9px;
    -webkit-border-radius:              9px;
    border-radius:                      9px;
}

this part is causing the default black transparent image and the rounded cut offs

edited Jan 8, 2013 at 20:32

Rob

441k74 gold badges851 silver badges1.1k bronze badges

answered Jul 25, 2012 at 7:01

sij

1,3677 gold badges20 silver badges37 bronze badges

Comments

bgallet · Accepted Answer · 2013-02-05 15:48:42Z

1

This post is well referenced on google. If anyone still looking for a simple solution, I just found one:

<p data-role="button"><img align="left" width="35px" src="something.jpg"/>Button name<p>

Hope this will help

answered Feb 5, 2013 at 15:48

bgallet

111 bronze badge

2 Comments

Daniele B Over a year ago

Welcome on stackoverflow. Can you please put it in the example in the jsfiddle? Thanks!

Daniel Benedykt Over a year ago

This creates a button with an image perfectly, but the problem is that the text is not vertically aligned anymore. Probably needs a CSS change also.

Chatura Dilan · Accepted Answer · 2012-10-13 02:32:31Z

0

override this css

.ui-btn-corner-all {

}

answered Oct 13, 2012 at 2:32

Chatura Dilan

1,5701 gold badge17 silver badges30 bronze badges

Comments

LeonardoX · Accepted Answer · 2014-10-15 11:31:35Z

0

None of the solutions worked for me...

Just put your css code

.ui-icon-save-icon{
    background:  url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px;
}

and add a :after css event to set default circle size to 0, and the default circle will disappear! :)

.ui-icon-save-icon:after {
    width: 0px;
    height: 0px;
}

edited Oct 15, 2014 at 11:31

answered Oct 15, 2014 at 11:22

LeonardoX

1,35322 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using a custom rectangular icon in button in jquery mobile

7 Answers 7

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related