从jQuery Mobile中删除/覆盖默认图标样式

Question

在我的移动网络应用程序的标题中，我想提供一个设置图标，并且只提供一个设置图标。我不想要渲染任何样式。 jQuery Mobile增加了很多样式，我只想删除它。我已经接近了，但遇到了一些问题。

这里我在标题中定义了自定义图标：

<a href="#settings" class="ui-btn ui-icon-settings ui-btn-icon-notext" data-transition="flip"></a>

此CSS将删除它在图标下添加的按钮和背景颜色（.toolbar是我为标题定义的类）：

.toolbar .ui-btn, .toolbar .ui-btn-up, .toolbar .ui-btn-hover, .toolbar .ui-btn-down, .toolbar     .ui-btn-inner,
.ui-btn-icon-left::after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after
        {
            background:none;
        }

我需要能够设置其大小并始终保持在标题中心（对于访问该站点的所有设备）。 jQuery Mobile将图标放在边界框中，因此如果我将图标的大小增加到30px，它会切断部分图标。 25px看起来不错，但是不够大，并且它没有完全集中在他们定义的框中。我需要摆脱那个盒子（出现在悬停中），你可以在这张图片中看到。

问题： 有没有更好的方法来向标题添加一个简单的图标，避免重置/覆盖样式？ 或者我需要添加什么来获得所需的结果？ 我也想为纯文字按钮这样做，所以如果我能用一块石头杀死2只鸟就会很棒。

非常感谢！

PS。我正在使用jQM v 1.4.0 rc1。

Answer 1

这是 DEMO FIDDLE

我给了按钮一个id并添加了类ui-nodisc-icon来隐藏光盘。

<a id="btnSettings" href="#settings" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-nodisc-icon" data-transition="flip"></a>

隐藏按钮的CSS和图标的全部大小是：

#btnSettings{
    background-color: transparent;
    border: 0;
}
#btnSettings:after {
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    margin-left: -15px;
    margin-top: -15px;
}

将宽度，高度和背景大小设置为您想要的尺寸图标，然后将边距左侧和顶部设置为负高度和宽度的一半，以使其保持居中。