title: How to use an image as a button in jQuery Mobile?
body: <p>I went through a search about how default buttons in jQuery Mobile can be replaced by custom images, as I am implementing code to build a PhoneGap app. I found this <a href="http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile" rel="nofollow">one useful link</a>.</p>
  
  <p>I have code like this:  </p>
  
  <pre><code>&lt;a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom"&gt;Custom Icon&lt;/a&gt;
  </code></pre>
  
  <p>And the CSS is:</p>
  
  <pre><code>.ui-icon-myapp-settings {
    background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
  }
  </code></pre>
  
  <p>Still it shows a + icon and not my icon.</p>
  
  <pre><code>css directory -- ../css/style.css
  image directory  ../css/images/settings.png
  </code></pre>
  
  <p>And I get a view like:</p>
  
  <p>What's wrong with the code or Image location?</p>