CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
saurabhsood91
saurabhsood91

Reputation: 479

jQuery Mobile setting Icons for Buttons

I am trying to add icons to buttons, which I have dynamically created using jQuery. I created the css class for the button. On running, I am getting a grey round circle on the side of the button, instead of the image. On inspecting elements, I get that the image for the button has been overridden.

How do I ensure that button icons appear instead of the grey circle? The Code I have used is:

JS:

var btn1 = $("<button/>", {'id': 'TestButton'}).html('Sample Button');
btn1.buttonMarkup({ theme: 'c', icon: 'btn1' });

CSS:

.ui-icon-btn1 {
    background-image: url('../../images/gallery.jpg');
    background-color: rgb(255,255,255);
    border-style: hidden;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Upvotes: 0

Views: 130

Answers (1)

Subedi Kishor
Subedi Kishor

Reputation: 5996

A simple solution is that you put !important to that property.

background: url('../../images/gallery.jpg') !important;
background-color: rgb(255,255,255) !important;

This worked for me on similar issue with jQuery- mobile.

Edit:

To remove the Disc around the button, you need to add 

`border: 0 !important;`

to the class

.ui-li-link-alt .ui-btn but make sure you do not override the default behavior of the jQuery UI.

Upvotes: 1

Related Questions