Fit default icons into header button in jQuery Mobile

I'm trying to add a menu-style drop down button to the header of a mobile app created via jQuery Mobile, but I cannot find a way to fit the default 'gear' icon to the button. The following is the HTML page.

<div data-role="header">    
            <a href="#cfgMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slidedown" data-icon="gear" data-theme="a"></a>

            <div data-role="popup" id="cfgMenu" data-theme="a">
                <ul data-role="listview" data-inset="true" style="min-width: 210px;" data-theme="a">
                    <li data-role="divider" data-theme="a">Configura</li>
                    <li><a href="#">Lingua</a>
                    </li>
                    <li><a href="#">Sci club</a>
                    </li>
                    <li><a href="#">Preferenze</a>
                    </li>
                </ul>
            </div>
                <h1>Title</h1>

        </div>
</div>

With this HTML the result is the following:

If I add style="height:100%" to the <a> the result is the following:

What can I do to fit the icon into the image?


Just found that adding text everything is OK. But space in the header is limited, so I'd like to avoid this solution

Answers


For jQM 1.4 you use button classes instead of the data attributes:

<a href="#cfgMenu" data-rel="popup" class="ui-btn ui-btn-inline ui-icon-gear ui-btn-icon-notext" data-transition="slidedown"  data-theme="a"></a>

DEMO


Need Your Help

Overwriting files in Windows by renaming randomly fails

c windows file edit overwrite

I have a text file that I want to edit by rewriting it to a temp file and then overwrite the original. This code doesn't do that as it's simplified but it does include the problem I have. On Window...

How do you check that a number is NaN in JavaScript?

javascript nan

I’ve only been trying it in Firefox’s JavaScript console, but neither of the following statements return true: