Alex Rivera | Logout

jquery mobile how remove the grey round circle on icon

Asked 2012-05-27T05:03:48.393
8

I build my first phonegap Jquery Appl Im changing my icon using this class

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

This custom icon is for a list view , and i try to remove the round grey background load Also my picture is a bit big for the shape I was playing with the .ui-icon but doesnt work Cant find the class

I just wanna my custom arrow picture full size on a white background list no round no circle box shape Maybe there is an attribute or via css to make that thanks

jquery-mobile icons
Edit
Report

3 Answers

9

Late to the party here, but a simple answer is to add

background-color: transparent;
box-shadow: none;

to your custom class name, so:

.ui-icon-myapp-email {
    background-color: transparent;
    box-shadow: none;
}

is all you need.

answered 2012-08-07T12:10:03.940
0

Overrides the icon disc color to white. 

.ui-icon,
.ui-icon-searchfield:after {
    background: #fff /*{global-icon-color}*/;
    background: rgba(255,255,255,1) /*{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;
}

Icon size is specified in ui-icon class which defaults to 18px. 

.ui-icon {
    width: 19px;
    height: 19px;
}
answered 2012-05-27T05:21:19.303
0

For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

answered 2013-06-13T03:00:06.883

Your Answer