Databases
StackOverflow2013
Postsdbo
POCreating a button in jQuery Mobile with a custom icon
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a button in jQuery Mobile with a custom icon
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload