title: Creating a button in jQuery Mobile with a custom icon
body: <p>I am working on an app for a client and am trying to create a button with a completely custom icon. The icon is 30px x 30px and transparent in the middle.</p>
  
  <p>I have almost achieved what I want using this css code:</p>
  
  <pre><code>/* info button override */
  .ui-icon-info-page {
      background: url(images/G_help_icon_round.png) 50% 50% no-repeat;
      background-size: 30px 30px;
      background-color: black;
  }
  </code></pre>
  
  <p>But there is a thin black circle that appears inside the icon, and also the icon image appears to be cut off:</p>
  
  <p><img src="https://i.stack.imgur.com/pCPlL.png" alt="enter image description here"></p>
  
  <p>I want to remove this circle and prevent the icon ? from being cut off. Also, I would like the question mark to be transparent instead of black, to show the image of the navigation bar beneath. If I try to set the background color to transparent though, the button appears entirely white:</p>
  
  <p><img src="https://i.stack.imgur.com/bJ0G4.png" alt="enter image description here"></p>
  
  <p>How can I do this?</p>
  
  <p>Update:</p>
  
  <p>I tried applying this code:</p>
  
  <pre><code>/* info button override */
  .ui-icon-info-page {
      background: url(help.png) 50% 50% no-repeat;
      background-size: 30px 30px;
      width: 30px;
      height: 30px;
      margin-top: -15px !important;
      box-shadow: none;
      -webkit-box-shadow: none;
  }
  </code></pre>
  
  <p>And got this result:</p>
  
  <p><img src="https://i.stack.imgur.com/TphzJ.png" alt="enter image description here"></p>
  
  <p>I'm able to move the icon around by adjusting the top and left margins, but it's edges are cut off outside a frame centered on the black circle:</p>
  
  <p><img src="https://i.stack.imgur.com/In34R.png" alt="enter image description here"> </p>
  
  <p>Update 2:</p>
  
  <p>Here is the button I am using (Note that it is invisible here because it is a white button on a white background):</p>
  
  <p><img src="https://i.stack.imgur.com/AqicD.png" alt="enter image description here"></p>
  
  <p>Here is the html code that I use to load the button:</p>
  
  <pre><code>&lt;div data-role="header" data-position="fixed"&gt; 
              &lt;div&gt;&lt;img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/&gt; &lt;/div&gt;          
              &lt;a href="index.html" data-icon="refresh" class="ui-btn-left" data-transition="fade" data-iconpos="notext" data-theme="a"&gt;&lt;/a&gt;
              &lt;a href="info.html" data-icon="info-page" class="ui-btn-right" data-transition="flip" data-iconpos="notext" data-theme="a"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>