CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
user700284
user700284

Reputation: 13620

Using a custom rectangular icon in button in jquery mobile

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.

Upvotes: 1

Views: 10133

Answers (7)

LeonardoX
LeonardoX

Reputation: 1303

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;
}

Upvotes: 0

bgallet
bgallet

Reputation: 11

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

Upvotes: 1

sij
sij

Reputation: 1347

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

Upvotes: 1

Chatura Dilan
Chatura Dilan

Reputation: 1572

override this css

.ui-btn-corner-all {

}

Upvotes: 0

trevorgk
trevorgk

Reputation: 1466

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;
}

Upvotes: 4

Ben
Ben

Reputation: 7597

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?

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

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)

Upvotes: 1

Related Questions