使默认图标适合 jQuery Mobile 中的标题按钮答案

【问题标题】：Fit default icons into header button in jQuery Mobile使默认图标适合 jQuery Mobile 中的标题按钮
【发布时间】：2014-01-30 14:18:37
【问题描述】：

我正在尝试将菜单样式的下拉按钮添加到通过 jQuery Mobile 创建的移动应用程序的标题中，但我找不到将默认“齿轮”图标适合按钮的方法。以下是 HTML 页面。

<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>

使用此 HTML，结果如下：

如果我将 style="height:100%" 添加到 <a>，结果如下：

如何使图标适合图像？

刚刚发现添加文字一切正常。但是标题中的空间是有限的，所以我想避免这种解决方案

【问题讨论】：

标签： html jquery-mobile button icons

【解决方案1】：

对于 jQM 1.4，您使用按钮类而不是数据属性：

<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

【讨论】：

谢谢。现在它起作用了。谷歌搜索时，我应该更加注意 jQuery Mobile 答案的版本。